时间戳

首页 > 解决方案 > Material UI - 如何在主题级别为选中和未选中状态覆盖 Switch 组件的轨道样式？

javascript - Material UI - 如何在主题级别为选中和未选中状态覆盖 Switch 组件的轨道样式？

问题描述

在材质 UI 中，我试图Switch在主题级别覆盖组件的样式，但是覆盖此类值的文档非常混乱。

createMuiTheme({
        palette: {
            type: darkMode ? 'dark' : 'light',
            background: {
                default: darkMode ? '#000' : '#f00',
            },
        },
        overrides: {
            MuiSwitch: {
                track: {
                    backgroundColor: '#3196E3',
                    opacity: 1,
                },
            },
        },
    }

这会覆盖轨道的颜色，但目前还不清楚在Switch选中时如何指定不同的颜色。这就是我得到的。. . .在此处输入图像描述

我知道有类似的帖子试图解决相同的问题（例如，https://stackoverflow.com/questions/63249267/how-can-i-override-the-style-of-the-material-ui -switch-component-when-checked'）。他们不工作。有谁知道我如何在主题级别覆盖轨道，以便在选中时显示一种颜色，在未选中时显示另一种颜色？

标签： javascriptcssreactjsmaterial-ui

解决方案

推荐阅读