React Material UI Slider [重复]答案

【问题标题】：React Material UI Slider [duplicate]React Material UI Slider [重复]
【发布时间】：2021-06-14 07:40:57
【问题描述】：

我正在使用 React Material UI 滑块，并且想要自定义指针的颜色，从默认值蓝色变为粉红色？我已经尝试在 withStyles 对象中修改拇指和手指，但它不起作用。

https://material-ui.com/components/slider/

我想自定义滑块指针的颜色。

【问题讨论】：

您能否向我们提供Minimal, Complete, and Reproducible Code Example，说明您尝试过的方法不起作用？
stackoverflow.com/questions/58327393/…

标签： javascript css reactjs material-ui slider

【解决方案1】：

材质 UI 库提供的 makeStyles 组件有助于将自定义样式覆盖到材质 UI 的样式化组件。这是一个可能对您有所帮助的小快照：

import { makeStyles } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';

const useStyles = makeStyles({
  root: {
    width: 250,
  },
  sliderColor: {
    color: 'red'
  }
});

export default function InputSlider() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Grid container spacing={2} alignItems="center"
        <Grid item xs>
          <Slider
            value={typeof value === 'number' ? value : 0}
            onChange={handleSliderChange}
            aria-labelledby="input-slider"
            className={classes.sliderColor}
          />
        </Grid>
      </Grid>
    </div>
  );
}

【讨论】：

【解决方案2】：

像这样创建一个自定义组件：

const PrettoSlider = 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 {
...
 <PrettoSlider valueLabelDisplay="auto" aria-label="pretto slider" defaultValue={20} />
...
}

by https://material-ui.com/components/slider/ 自定义滑块

【讨论】：