React Material UI 滑块

如何解决React Material UI 滑块

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

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

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

解决方法

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

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,})(Slider);

并在您的渲染中调用它，例如：

return {
...
 <PrettoSlider valueLabelDisplay="auto" aria-label="pretto slider" defaultValue={20} />
...
}

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

材质 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>
  );
}