Material UI Slider 不會滑動

Question

我有一個 Material UI 滑塊，當您單擊它並拖動它時不會滑動。 我或多或少地從https://material-ui.com/components/slider/復制了一個示例，並添加了一個 onChange 函數。 如果您單擊不同的位置，這些值會更新得很好。 我已經盯着這個太久了，並且已經對代碼視而不見，無法弄清楚我錯過了什么。

這是沙盒的鏈接

import React, { useState } from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/styles/withStyles";
import Card from "@material-ui/core/Card";
import { Typography, Paper, Grid, CssBaseline } from "@material-ui/core";
import Slider from "@material-ui/core/Slider";

function App(props) {
  const [state, setState] = useState({
    fields: {
      contractAmount: 10000,
      termValue: 2
    }
  });

  const handleInvestmentChange = name => (e, value) => {
    setState({
      ...state,
      fields: {
        ...state.fields,
        [name]: value
      }
    });
  };

  const AmountSlider = withStyles({
    root: {
      color: "#52af77",
      height: 8
    },
    thumb: {
      height: 24,
      width: 24,
      backgroundColor: "#fff",
      border: "2px solid currentColor",
      marginTop: -8,
      marginLeft: -12,
      "&:focus,&:hover,&$active": {
        boxShadow: "inherit"
      }
    },
    active: {},
    valueLabel: {
      left: "calc(-50% + 14px)",
      top: -22,
      "& *": {
        background: "transparent",
        color: "#000"
      }
    },
    track: {
      height: 8,
      borderRadius: 4
    },
    rail: {
      height: 8,
      borderRadius: 4
    }
  })(Slider);

  const TermSlider = withStyles({
    root: {
      color: "#52af77",
      height: 8
    },
    thumb: {
      height: 24,
      width: 24,
      backgroundColor: "#fff",
      border: "2px solid currentColor",
      marginTop: -8,
      marginLeft: -12,
      "&:focus,&:hover,&$active": {
        boxShadow: "inherit"
      }
    },
    active: {},
    valueLabel: {
      left: "calc(-50% + 4px)"
    },
    track: {
      height: 8,
      borderRadius: 4
    },
    rail: {
      height: 8,
      borderRadius: 4
    }
  })(Slider);

  return (
    <div>
      <CssBaseline />
      <Typography variant="h4" align="center" component="h1" gutterBottom>
        Select your Investment Level
      </Typography>
      <Card>
        <Paper style={{ padding: 16, minHeight: 445, maxHeight: 445 }}>
          <Grid container alignItems="flex-start" spacing={2}>
            <Grid item xs={12} lg={12} xl={12}>
              <Typography variant="h4">Investment Amount</Typography>
              <Typography variant="h6" gutterBottom>
                ${state.fields.contractAmount.toLocaleString()}
              </Typography>
              <AmountSlider
                valueLabelDisplay="auto"
                defaultValue={10000}
                value={
                  typeof state.fields.contractAmount === "number"
                    ? state.fields.contractAmount
                    : 2000
                }
                onChange={handleInvestmentChange("contractAmount")}
                step={1000}
                min={2000}
                max={100000}
              />
              <Typography variant="h4">Investment Term</Typography>
              <Typography variant="h6" gutterBottom>
                {state.fields.termValue} years
              </Typography>
              <TermSlider
                name="termValue"
                valueLabelDisplay="off"
                aria-label="term slider"
                defaultValue={10}
                value={
                  typeof state.fields.termValue === "number"
                    ? state.fields.termValue
                    : 2
                }
                onChange={handleInvestmentChange("termValue")}
                min={2}
                max={25}
              />
              <Grid
                item
                style={{
                  marginTop: 16,
                  alignContent: "right",
                  alignItems: "right"
                }}
              >
                <Typography variant="p">
                  *Your investment amount and contract length can be changed at
                  any time as described in our Terms & Conditions.
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Paper>
      </Card>
    </div>
  );
}

export default App;

Answer 1

如果您需要自定義 MUI Slider 的主題，則需要使用MUI Theme Provider 。

你需要像這樣導入它

import { ThemeProvider, createMuiTheme } from "@material-ui/styles";

然后嘗試將您的自定義 css 移動到一個具有createMuiTheme方法值的變量中，該方法具有overrides屬性，例如，

  const AmountSlider = createMuiTheme({
    overrides: {
      MuiSlider: {
        root: {
          color: "#52af77",
          height: 8
        },
        thumb: {
          height: 24,
          width: 24,
          backgroundColor: "#fff",
          border: "2px solid currentColor",
          marginTop: -8,
          marginLeft: -12,
          "&:focus,&:hover,&$active": {
            boxShadow: "inherit"
          }
        },
        active: {},
        valueLabel: {
          left: "calc(-50% + 14px)",
          top: -22,
          "& *": {
            background: "transparent",
            color: "#000"
          }
        },
        track: {
          height: 8,
          borderRadius: 4
        },
        rail: {
          height: 8,
          borderRadius: 4
        }
      }
    }
  });

然后在模板中使用它，例如，

          <ThemeProvider theme={AmountSlider}>
            <Slider
              valueLabelDisplay="off"
              defaultValue={10000}
              value={
                typeof state.fields.contractAmount === "number"
                  ? state.fields.contractAmount
                  : 2000
              }
              onChange={handleInvestmentChange("contractAmount")}
              step={1000}
              min={2000}
              max={100000}
            />
          </ThemeProvider>

同樣，您也可以為 TermSlider 實現自定義主題..

分叉碼沙盒

注意：我認為您對AmountSlider和TermSlider使用相同的 css，如果是這樣，請創建一個主題變量並將其用於兩者。

例如，如果兩者具有相同的 css，您可以對 Amount 和 Term 滑塊使用theme={AmountSlider} 。當然，在這種情況下，變量名稱可以是唯一的。