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} 。当然，在这种情况下，变量名称可以是唯一的。