Как стилизовать материал-слайдер ui

Question

Я хотел бы установить цвета различных частей ползунка, ручка и обе части дорожки: до и после ручки. Или еще лучше: сделайте слайдер невидимым (но все еще работающим), чтобы я мог рисовать что-то сам по значению слайдера ...

Не думаю, что доступная в настоящее время свойство стиля позволяет мне это делать?

Answer 1

Вы правы, вы не можете сделать это, используя свойство style.

Однако вы можете изменить его цвет, настроив тему муи. 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)