如何设置材质-ui滑块的样式

时间:2016-04-14 14:42:53

标签: material-ui

我想设置滑块各个部分的颜色, 手柄和轨道的两个部分:手柄前后。 或者更好的是:让滑块不可见(但仍然有效)所以我可以根据滑块值自己画一些东西......

我认为当前可用的样式属性不能让我这样做吗?

1 个答案:

答案 0 :(得分:4)

你是对的,你不能只使用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)