material-ui：使用内联修改组件属性不起作用

Question

我想修改 'toggle' 组件属性，以便在 'on' 时颜色为绿色。默认行为是 'toggle' 'thumbOnColor' 设置为 'palette' 原色（在我的例子中是 'redA700'）。

文档建议以下内容应该起作用，但它不起作用：

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

我尝试仅使用 'style= ...' 内联，'style' 和 .css，在我的应用程序主题中指定 'toggle: ...'（即我定义修改后的 'palette'。似乎没有任何效果，无论我做什么，默认行为仍然存在。理想情况下，我希望在未设置时切换 'grey'，在设置时切换 'green'。

实际上是否可以更改我应用程序中 'toggle' material-ui 组件的主题？

Answer 1

最简单的方法是定义您自己的主题，然后您可以覆盖缩略图和轨道颜色。有关详细信息，请阅读 theme documentation here。但是，如果您感到危险，您应该可以使用以下代码片段，但请注意轨道颜色也需要进行类似的更改 -

thumbStyle={{backgroundColor:"green"}}

此外，您需要根据组件的切换状态为此提供不同的值。

更新旧版本的文档有一个主题切换，如果您在 documentation source at github.

中深入挖掘，您可能会找到它

material-ui：使用内联修改组件 属性 不起作用

material-ui: modify component property with inline not working

css

material-ui

material-ui：使用内联修改组件属性不起作用