---
title: "CSSクラスと属性"
slug: "css-classes-and-attributes"
abstract: "Material UIライブラリコンポーネントのカスタムコードを書く際に使うCSSクラスと避けるべきクラスについて。"
---
# CSSクラスと属性

Sitecore Content Hubはインターフェースをレンダリングする際にMaterial UI(MUI)コンポーネントライブラリを含んでいます。カスタムコードでCSSクラスや属性を使用する際は、これらのベストプラクティスに従ってください。

> !警告CSSのカスタマイズはシステムのアップグレードによって影響を受ける可能性があります。CSSクラスの変更が持続しなくなったり、予期せぬ動作が発生することがあります。アップデート後は注意し、カスタマイズ内容をよく確認してください。

> !重要標準のSitecore Content Hubアイコンをカスタムのものに置き換えるためにCSSを使ってはいけません。代わりに、[管理ページのIconOverrides設定](https://doc.sitecore.com/ch/en/users/content-hub/upload-and-use-custom-icons.html)を使ってアイコンを設定してください。

避けるべき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クラスに接頭辞を付けてください。