如何设置 material-ui 滑块的样式

Question

我想设置滑块各部分的颜色，手柄和轨道的两个部分：手柄之前和之后。或者更好：使滑块不可见（但仍然有效），这样我就可以根据滑块值自己绘制一些东西...

我不认为当前可用的样式-属性能让我做到这一点？

Answer 1

你是对的，你不能仅仅使用 style 属性.

但是您可以更改它的颜色来自定义 mui 主题。 http://www.material-ui.com/v0.15.0-alpha.2/#/customization/themes

示例：

import React from 'react';
import Slider from 'material-ui/Slider';
import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

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

const SliderExample = () => (
  <div>
    <MuiThemeProvider muiTheme={muiTheme}>
        <Slider />
    </MuiThemeProvider>
  </div>
);

export default SliderExampleSimple

注意：handle 将与它之前的行具有相同的颜色..(selectionColor)

如何设置 material-ui 滑块的样式

How to style the material-ui slider

material-ui