选中时如何正确使用 MUISwitch“条”颜色的主题覆盖？

Question

仔细阅读源代码后，我尝试了以下操作，该操作有效但在控制台中生成警告。

const myTheme = createMuiTheme({
  overrides: {
    MuiSwitch: {
      checked: {
        "& + $bar": {
          opacity: 1.0,
          backgroundColor: "rgb(129, 171, 134)" // Light green, aka #74d77f
        }
      }
    }
  }
});

我得到的错误/警告是：

Warning: Material-UI: the `MuiSwitch` component increases the CSS specificity of the `checked` internal state.
You can not override it like this: 
{
  "checked": {
    "& + $bar": {
      "opacity": 1,
      "backgroundColor": "rgb(129, 171, 134)"
    }
  }
}

Instead, you need to use the $ruleName syntax:
{
  "&$checked": {
    "& + $bar": {
      "opacity": 1,
      "backgroundColor": "rgb(129, 171, 134)"
    }
  }
}

我不知道如何正确地做到这一点。

更新：

我在下面得到了一个很好的解决方案，但我的代码也覆盖了不同的辅助颜色，而新规则也覆盖了那个颜色。

colorSecondary: {
        "&$checked": {
          "& + $bar": {
            opacity: 0.3,
            backgroundColor: "white"
          }
        }
`

Answer 1

更新- 最初的问题是针对 Material-UI 的 v3。在 v4 中，“bar”CSS 类被重命名为“track”。答案中的示例已针对 v4 更新。

以下语法有效：

const theme = createMuiTheme({
  overrides: {
    MuiSwitch: {
      track: {
        "$checked$checked + &": {
          opacity: 1.0,
          backgroundColor: "rgb(129, 171, 134)" // Light green, aka #74d77f
        }
      }
    }
  }
});

$checked 是在那里两次以增加特异性以匹配默认样式的特异性。

如果您需要以不同的方式处理三种不同的颜色选择，那么您可以执行以下操作：

import React from "react";
import ReactDOM from "react-dom";

import Switch from "@material-ui/core/Switch";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiSwitch: {
      track: {
        "$checked:not($colorPrimary):not($colorSecondary) + &": {
          opacity: 1.0,
          backgroundColor: "rgb(129, 171, 134)"
        },
        "$checked$colorPrimary + &": {
          opacity: 1.0,
          backgroundColor: "purple"
        },
        "$checked$colorSecondary + &": {
          opacity: 1.0,
          backgroundColor: "pink"
        }
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Switch color="default" />
      <Switch color="primary" />
      <Switch color="secondary" />
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);