反应 Material UI 滑块

Question

我正在使用 React material UI 滑块并希望将指针的颜色从默认值蓝色自定义为粉红色？我已经尝试在 withStyles 中修改拇指和手指 object.But 它不起作用。

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

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

Answer 1

像这样创建自定义组件：

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} />
...
}

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

Answer 2

material UI 库提供的 makeStyles 组件有助于将自定义样式覆盖到 material 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>
  );
}

反应 Material UI 滑块

React Material UI Slider

javascript

css

slider

reactjs

material-ui