如何更改Material-UI滑块的颜色

Question

我希望更改Material UI滑块组件的颜色。

我尝试更改CSS样式，但它不起作用，然后我尝试了此问题中提供的解决方案，并应用了这段代码，但它不起作用。

getMuiTheme：

const muiTheme = getMuiTheme({
  slider: {
    trackColor: "yellow",
    selectionColor: "green"
  }
});

在组件中：

<MuiThemeProvider muiTheme={muiTheme}>
     <Slider
         min={18}
         max={90}
         ValueLabelComponent={ValueLabelComponent} 
         defaultValue={40}
     />
</MuiThemeProvider>

- Mohammad Sadegh Foroughi

---

你尝试过使用createMuiTheme创建主题的链接中的最新帖子了吗？ - Jake Luby

Answer 1

具体取决于你使用的 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，请告诉我具体是哪个版本，我会尽力提供帮助。

- Ido

---

我正在使用material-UI 4.5.0，我搜索了这个问题并找到了解决方案，但它是针对0.x版本的。它起作用了，谢谢你的帮助。 - Mohammad Sadegh Foroughi

Answer 2

我使用 material-ui v4 的 'withStyles' 来进行覆写。

这是用于 Slider 样式的：

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

颜色应该更新，我也在这里更新自定义缩略图。希望有所帮助：）

- Ido Bleicher

---

谢谢，是的，我们可以使用Make style和With style来完成它。 - Mohammad Sadegh Foroughi

Answer 3

另一种方法是直接在组件上定义自定义样式。

<Slider sx={{
    '& .MuiSlider-thumb': {
        color: "yellow"
    },
    '& .MuiSlider-track': {
        color: "yellow"
    },
    '& .MuiSlider-rail': {
        color: "#acc4e4"
    },
    '& .MuiSlider-active': {
        color: "green"
    }
}} />

- Chad Cache