Как переопределить некоторые стили компонента Switch в Material-UI?

Question

[Helios69]

Пытаюсь переопределить стили для компонента Switch из Material-UI. Вроде как что-то получается, но нужно так же переопределить стили для состояния disabled. Погуглил, покопался в документации, так ничего и не нашел. Да, есть некий псевдокласс disabled, который

Pseudo-class applied to the internal SwitchBase component's disabled class.

, но я не понимаю как через него менять конкретные части компонента. Вот что есть:
Должно быть как на картинке ниже:

spoiler

Answer 1

[Евгений Щербаков]

Скорее всего так, попробуйте.
Возможно, в стилях придётся писать !important

import { makeStyles } from "@material-ui/core/styles";
import Switch from "@material-ui/core/Switch";

const useStyles = makeStyles({
  classForDisabled: {
    // ...your css...
  }
});

export default function App() {
  const styles = useStyles();

  return (
    <div className="App">
      <Switch classes={{ disabled: styles.classForDisabled }} disabled={true} />
    </div>
  );
}

Comments

[Helios69]

Я не могу понять как именно обращаться к внутренним элементам свича. Если бы он состоял только из одного дива, тогда проблем бы не было))
Вот например Thumb или Track. Как к ним обратиться в disabled стейте?

[Евгений Щербаков]

Ааа, я понял Вас :)
Тогда вот Вам пример https://codesandbox.io/s/material-demo-forked-v74yl

[Евгений Щербаков]

Helios69, помогло? :)

[Helios69]

Евгений Щербаков, Да, помогло. Спасибо большое!