material-ui: изменить свойство компонента с inline не работает

Question

Я хочу изменить свойство компонента «toggle», так что когда он «включен», цвет зеленый. По умолчанию поведение «toggle» «thumbOnColor» установлено на основной цвет «палитры» (в моем случае «redA700»).

Документов предполагают, что должно работать, но это не делает:

<Toggle 
     defaultToggled={relay} 
     label={localization.get("user_bracelets_relay")} 
     ref="relayField" 
     onToggle={par(updateRelay, component)} 
     thumbStyle={{thumbOnColor:"green"}}/> 

Я попытался, используя только «стиль = ...» инлайн «стиль» с .css, specifiying «тумблера : ... в моей теме приложения (т. е. где я определяю мою измененную «палитру». Ничего не работает, независимо от того, что я делаю, поведение по умолчанию остается. В идеале я хочу, чтобы переключатель «серый» не был установлен, и «зеленый», когда она есть.

является ли это на самом деле можно изменить тему компоненты материала-Ui «тумблер» в моем приложении?

Answer 1

Самый простой способ сделать это - определить свою собственную тему, затем вы можете переопределить цвета большого пальца и дорожки. Для получения дополнительной информации прочитайте theme documentation here. Тем не менее, если вы чувствуете себя опасно, вы должны быть в состоянии использовать следующий фрагмент кода, но остерегайтесь цвет дорожки также должны быть так же изменены -

thumbStyle={{backgroundColor:"green"}}

Кроме того, вам нужно будет предоставить различные значения для это основано на переключенном состоянии компонента.

Update Старая версия документации была тематическая пуговицу, вы можете быть в состоянии найти его, если вы копаете достаточно глубоко в documentation source at github.