[解決済み] カスタマイズ素材UI チェックした場合としない場合の切り替え

質問

ReactのMaterial UI Switchが無効の時にスタイリングを追加するのに苦労しています。このためにwithStylesを使用したいと思っています。チェックされた状態とチェックされていない状態の処理は、トラックのスタイリングと同様にうまく機能しますが、私が試したものは何も、サムまたはトラックの無効な状態のスタイリングに機能しませんでした。

以下は、私が使用しているコードで、コメントアウトされた無効状態のスタイル付けの試みが含まれています。

const MySwitch = withStyles({
    switchBase: {
        color: "orange",
        opacity: 0.8,
        "&$checked": {
            color: "orange",
            opacity: 1
        },
        "&$checked + $track": {
            backgroundColor: "black",
            opacity: 1
        },
        // "&$checked + $disabled": {
        //     color: "gray",
        //     opacity: 1
        // },
        // "&disabled": {
        //     color: "gray",
        //     opacity: 1
        // },
        // "&:disabled": {
        //     color: "gray",
        //     opacity: 1
        // },
    },
    // disabled: {
    //     "& + $thumb": {
    //         color: "gray"
    //     }
    // },
    checked: {},
    track: {}
})(Switch); 

何か感想は？

解決方法は？

Ryanさん、Giovanniさん、ありがとうございます。お二人の回答は、私がそれを理解するのに貢献しました。Ryanからのキーポイントは、"&$disabled"をルールで使うには、"disabled:{}"も必要である、ということです。そして、Giovanniさんの回答で、disabledの状態とcheckedの状態がどのように相互作用するかについて考えさせられました。私のコードは、disabled が動作するようになり、私の最終目標である checked と disabled の両方のスタイルを持つことができるようになったものです。

const MySwitch = withStyles({
    switchBase: {
        // thumb when unchecked
        color: "orange",
        opacity: 0.8,
        "&$checked": {
            // thumb when checked
            color: "orange",
            opacity: 1,
            // track when checked
            "& + $track": {
                backgroundColor: "black",
                opacity: 1,
            },
            // The rules above override the default rules for graying 
            // out the thumb and track when the switch is disabled,
            // so we have to add that back in ourselves
            "&$disabled": {
                // gray out the thumb
                color: "#bbb",
                "& + $track": {
                    // gray out the track
                    backgroundColor: "#ddd"
                }
            }
        },
    },
    checked: {},
    track: {},
    disabled: {}
})(Switch);