Невозможно создать слайдер (или, может быть, ничего) в пользовательском интерфейсе материалов

Question

Был an issue requesting documentation for theming, который впоследствии впоследствии закрыл автор. Автор нашел ответ. Вероятно, не-программист не будет. По крайней мере, разработчик, не программист, которому я помогаю, даже не знает, с чего начать (и у меня все еще нет рабочего цветного слайдера). Такая документация была бы замечательной. Даже если это всего лишь ссылка на код @jdelafon, найденный с некоторым объяснением, которое достаточно для ответа на следующий конкретный пример.

В конечном счете, нам нужен набор ползунков, каждый из которых имеет другой цвет. Кажется, что подходящий способ сделать это - с элементом-элементом inline styles.

Я сделал простой пример here. Можете ли вы изменить цвет слайдера? (Мы начали идти по пути к CSS, но виджет настолько динамичен, что этот подход заканчивается довольно уродливым.)

имеет два разных слота для тематики, ни одна из которых, кажется, не реагирует на встроенный объект с ключом selectionColor.

Должно быть простым. Наверное, так оно и есть, но, похоже, оно не документировано. В противном случае это инструментарий rad UI, спасибо разработчикам!

Answer 1

Посмотрите на this line of getMuiTheme.js. Вы можете найти там что slider может иметь эти стили переопределены:

{ 
    trackSize: 2, 
    trackColor: palette.primary3Color, 
    trackColorSelected: palette.accent3Color, 
    handleSize: 12, 
    handleSizeDisabled: 8, 
    handleSizeActive: 18, 
    handleColorZero: palette.primary3Color, 
    handleFillColor: palette.alternateTextColor, 
    selectionColor: palette.primary1Color, 
    rippleColor: palette.primary1Color, 
} 

В material-ui вам нужно использовать MuiThemeProvider для того, чтобы использовать пользовательскую тему. Берем пример:

... 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import { Slider } from 'material-ui'; 

const theme1 = getMuiTheme({ 
    slider: { 
    selectionColor: "red", 
    trackSize: 20 
    } 
}) 

const theme2 = getMuiTheme({ 
    slider: { 
    selectionColor: "green", 
    trackSize: 30 
    } 
}) 

const HelloWorld =() => (
    <div> 
    ... 
    <MuiThemeProvider muiTheme={theme1}> 
    <Slider defaultValue={0.5}/> 
    </MuiThemeProvider> 
    <MuiThemeProvider muiTheme={theme2}> 
    <Slider defaultValue={0.5}/> 
    </MuiThemeProvider> 
    </div> 
); 

export default HelloWorld; 

Измененная webpackbin: http://www.webpackbin.com/EyEPnZ_8M

sliderStyle вы пытались использовать для различных стилей :-) Как marginTop/marginBottom, в full list can be found here.