Sometimes, using the generic CSS classes of the member portal is not enough to apply a style because one or more special dynamic selectors are used to apply a certain style to an element.
Before we dive into detail, make sure to read more about Member Portal Custom Code.
Customizing the member portal is only available with the Premium Apps Package.
How It Works
In this particular case, if we want to change the padding of the filter container by using the generic class MuiGrid-root, the change will not be applied because it will be overridden by the higher specificity of the dynamic class selector combination.
If you decide to raise specificity by using the classes MuiGrid-container and MuiGrid-item to create the following snippet, you will change the padding of all containers that have those classes:
.MuiGrid-root.MuiGrid-container.MuiGrid-item { padding: 1.6rem;}For such cases, we are providing IDs to certain containers and elements so that you may raise the specificity of the selector and, at the same time, encapsulate your changes to a particular part of the application layout. In the example above, the following code will result in a change of the padding of the filter container only:
#side-filter { padding: 1.6rem;}
Note: We do not use id selectors in default stylesheets. These are provided for easy customization of styles, so adding an id selector to a class or tag will always result in higher specificity and hence will override the default style.
Important: Using the !important keyword is considered bad practice, and we generally refrain from using it. In rare cases, it is used to override a complex selector style of a third-party library. In such cases, you might want to use a combination with an id selector to override the default !important: style with your own !important statement. Remember that default styles where the !important: keyword is present are most likely temporary solutions to complex problems, and the default style may change at any time without notice.