web-dev-qa-db-ja.com

材料-UIスライダカラーを変更する方法

素材のUIスライダコンポーネントの色を変更したいです

私はCSSスタイルを変更しようとしましたが、それは機能していません、それから私は この です。

getMuitheme：

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

そしてコンポーネントで：

<MuiThemeProvider muiTheme={muiTheme}>
     <Slider
         min={18}
         max={90}
         ValueLabelComponent={ValueLabelComponent} 
         defaultValue={40}
     />
</MuiThemeProvider>
 _
javascriptreactjsslidermaterial-ui
6
Mohammad Sadegh Foroughi

私は、材料-UI v4の「ithstyles」を持つ上書きをしました。

これはスライダースタイル用です。

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

そして色が更新されるべきです、私はカスタム親指のための親指を更新します。それが役に立つことを願っています:)

2
Ido Bleicher