2016-04-14 12 views
0

スライダのさまざまな部分の色を設定したいと思います。 ハンドルとトラックの両方の部分:ハンドルの前後。 また、スライダの値に基づいてスライダを表示しないようにする(ただし、まだ動作している)ようにしてください。material-uiスライダをスタイルする方法

現在利用可能なスタイルプロパティではこれを実行できません。

答えて

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です)

+0

[OK]を、これは動作します。ちょっと修正しました: 'material-ui/lib/MuiThemeProvider''からのimport MuiThemeProvider( '/ styles'なし) – willemx

関連する問題