CSSクラスと属性
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore Content Hubはインターフェースをレンダリングする際にMaterial UI(MUI)コンポーネントライブラリを含んでいます。カスタムコードでCSSクラスや属性を使用する際は、これらのベストプラクティスに従ってください。
!警告CSSのカスタマイズはシステムのアップグレードによって影響を受ける可能性があります。CSSクラスの変更が持続しなくなったり、予期せぬ動作が発生することがあります。アップデート後は注意し、カスタマイズ内容をよく確認してください。
!重要標準のSitecore Content Hubアイコンをカスタムのものに置き換えるためにCSSを使ってはいけません。代わりに、管理ページのIconOverrides設定を使ってアイコンを設定してください。
避けるべきCSSクラス:
CSSクラス
理由
.css-e7nfld-pdfViewerWrapper
このIDは自動生成され、ランダムに変わることがあります。
.MuiTab-root-413
このIDはMUI 4によって追加されました。MUI 5ではIDは削除されます。
- .Muiタブルート
- .handsontable
- .cke_editor_editor4
これらはサードパーティのライブラリからのクラスで、ライブラリが更新されると変更されることがあります。
使用するCSSクラスや属性:
CSSクラスまたは属性
理由
[data-style-name='largeIconWrapper'】
[data-testid='m-アイコン-イメージ']
data- 属性は特定の要素をターゲットにするための安定したセレクターを提供します。 data-testid 属性にはコンポーネントの種類と識別子が含まれます。
.css-1j8ywkp-gridItemTop -- [class*='gridItemTop']
css- id -で始まるクラス、例えばgridItemTopは安全にセレクタとして使用できます。
!重要Tailwind CSSを使う場合は、Content Hubの標準クラスとの競合を避けるために、CSSクラスに接頭辞を付けてください。