問題タブ [jss]

JSSを使用してこの動作を実現しようとしています。

クラスの代わりに ID を使用した例を次に示します: https://codepen.io/Pixelizm/pen/ICpKv/

編集：私は不明確だったと思います。CSS-in-JS を使用して、上記のコード スニペットとコードペンを再作成したいと考えています。( https://material-ui.com/customization/css-in-js/# )

編集 2: すべてのフィードバックに感謝します。質問は ID とクラスではなく、JSS に関するものでした。私は答えを見つけました、そしてそれはコメントにあります。皆さん、ありがとうございました。

Web コンポーネントは、スタイルのカプセル化にシャドウ DOM を使用します。仕様から、シャドウ ルート内のスタイルはローカルにスコープされていることがわかります。同じ Web コンポーネントを複数回インスタンス化すると、メモリにどのような影響がありますか? 例: カスタム ボタン Web コンポーネントを 10 回インスタンス化します。

例

style.css をインポートするか、上記のようにインラインで配置します。カスタム要素には props があり、その props に基づいてコンポーネントの動作が変化し続ける場合があります。このようなコンポーネントが 50 回繰り返されると、インライン スタイルも 50 回繰り返されます。ブラウザーはインスタンス間で最適化を行いますか?

スタイルが重複している場合、js の css はカプセル化のためのシャドウ DOM よりも優れたソリューションではありませんか? 適切なjss生成プラグインを使用して、dom全体で使用されるcssを実際に最適化できます。