Как правильно использовать переопределения темы для цвета "бара" переключателя 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

Работает следующий синтаксис:

const theme = createMuiTheme({
  overrides: {
    MuiSwitch: {
      bar: {
        "$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: {
      bar: {
        "$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);