我想更改 Material UI Slider 组件颜色
我曾尝试更改 CSS 样式但它不起作用，然后我尝试了此问题中给出的解决方案并应用了此代码但它不起作用
获取Mui主题：
const muiTheme = getMuiTheme({
slider: {
trackColor: "yellow",
selectionColor: "green"
}
});
并在组件中：
<MuiThemeProvider muiTheme={muiTheme}>
<Slider
min={18}
max={90}
ValueLabelComponent={ValueLabelComponent}
defaultValue={40}
/>
</MuiThemeProvider>
这取决于您使用的 Material-UI 版本。
您的代码与 Material-UI v0.x匹配：
import React from 'react';
import Slider from 'material-ui/Slider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MuiThemeProvider } from 'material-ui';
const muiTheme = getMuiTheme({
slider: {
trackColor: "yellow",
selectionColor: "red"
}
});
export default function V0Slider() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<Slider
min={18}
max={90}
ValueLabelComponent={0}
defaultValue={40}
/>
</MuiThemeProvider>
);
}
如果您使用 Material-UI v4，那将是要走的路：
import React from "react";
import Slider from '@material-ui/core/Slider';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
const muiTheme = createMuiTheme({
overrides:{
MuiSlider: {
thumb:{
color: "yellow",
},
track: {
color: 'red'
},
rail: {
color: 'black'
}
}
}
});
export default function V4Slider() {
return (
<ThemeProvider theme={muiTheme}>
<Slider min={18} max={90} defaultValue={40} />
</ThemeProvider>
);
}
如果您使用的是其他版本的 material-ui，请告诉我是哪个版本，我会尽力提供帮助。
我使用 material-ui v4 的“withStyles”进行了覆盖。
这是滑块样式：
const CustomSlider = withStyles({
root: {
color: "#6f8eff",
height: 3,
padding: "13px 0",
},
track: {
height: 4,
borderRadius: 2,
},
thumb: {
height: 20,
width: 20,
backgroundColor: "#fff",
border: "1px solid currentColor",
marginTop: -9,
marginLeft: -11,
boxShadow: "#ebebeb 0 2px 2px",
"&:focus, &:hover, &$active": {
boxShadow: "#ccc 0 2px 3px 1px",
},
color: "#fff",
},
})(Slider);
然后渲染你的滑块：
<CustomSlider
value={value}
onChange={handleChange}
step={20} />
并且颜色应该更新，我也在这里更新了自定义拇指的拇指。希望它有帮助:)