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 details, make sure to read more about Member Portal Custom Code.
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 classes 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:
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: