---
title: "CSS classes and attributes"
slug: "css-classes-and-attributes"
abstract: "The CSS classes to use when writing custom code for Material UI library components, and the classes to avoid."
---
# 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](https://doc.sitecore.com/ch/en/users/content-hub/upload-and-use-custom-icons.html).

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. |
| <ul><li>`.Mui`Tab-root</li><li>`.handsontable`</li><li>`.cke`_editor_editor4</li></ul> | 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']<br><br>[`data-testid`='m-icon-image'] | `data-` attributes provide stable selectors for targeting specific elements. The `data-testid` attribute contains the component type and identifier. |
| .css-1j8ywkp-`gridItemTop` -- [class*='gridItemTop'] | Classes that start with `css- id -`, such as `gridItemTop`, can safely be used as a selector. |

> [!important]
> If you use Tailwind CSS, prefix your CSS classes to avoid conflicts with Content Hub out-of-the-box classes.