Question

我想更改Material UI Slider组件的颜色

我试图更改CSS样式，但是它不起作用，然后我尝试了this问题中给出的解决方案，并应用了此代码，但它不起作用

getMuiTheme：

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

和组件中的

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

Answer 1

这取决于您使用的Material-UI版本。
您的代码与Material-UI v0.x 相匹配：

    if (choice == 1) {
      InventoryObject* item;
      item = buildItem();
      iArray[size] = item;
    }

如果您使用Material-UI v4 ，那将是一种方法：

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，请告诉我，我会尽力提供帮助。

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

颜色应更新，我也将此处的拇指更新为自定义拇指。希望对您有所帮助：）

如何更改Material-UI滑块颜色

2 个答案: