CSS classes and attributes

Sitecore Content Hub includes the Material UI (MUI) component library when rendering the interface. Follow these best practices when using CSS classes and attributes in your custom code.

Warning

CSS customizations might be affected by system upgrades. Changes to CSS classes might not persist, and unexpected behavior might occur. Exercise caution and review customizations after updates.

Important

Do not use CSS to replace standard Sitecore Content Hub icons with your custom ones. Instead, configure your icons using the IconOverrides setting on the Manage page.

CSS classes to avoid:

CSS class

Reason

.css-e7nfld-pdfViewerWrapper

This ID is auto-generated and can change at random.

.MuiTab-root-413

This ID was added by MUI 4. IDs are removed in MUI 5.

  • .MuiTab-root

  • .handsontable

  • .cke_editor_editor4

These are classes from third-party libraries, which might change when those libraries are updated.

CSS classes or attributes to use:

CSS class or attribute

Reason

[data-style-name='largeIconWrapper']

[data-testid='m-icon-image']

data- attributes are added to help you find your elements.

.css-1j8ywkp-gridItemTop -- [class*='gridItemTop']

Classes that start with css- id -, such as gridItemTop, can safely be used as a selector.

Do you have some feedback for us?

If you have suggestions for improving this article,