How to apply styling for 3rd party css framework like bootstrap

Question

Im working on react web app which has less file for its styling. As shown below, EnPage is a 3rd party component, which has content within it, Actually the main element class "page-body" has some styling issue, so I want to overwrite it with a styling fix

<div class="Banner">
  <EnPage>
     <div class="page">
       <main class="page-body"> ...</main>
     </div>
    </EnPage>
 </div>

when on hovering over in chrome devtools, I can see

.page-body {
  padding-right : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
  padding-left : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
}

In dev tools, if set these both attributes to 0, then it fixes styling issue

.page-body {
      padding-right : 0;
      padding-left : 0;
    }

Now how to do this code , like the below?

.Banner {
  --page-content-screen-lg-horizontal-padding : 0;
}

Please, provide a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — fromaline, May 28 '21 at 07:16

score 0 · Accepted Answer · answered May 28 '21 at 07:51

Generally third parts materials generate custom classes that style your element. Normally, their classes are inyected after yours, to be sure that their styles have precedence over inherited or previously defined styles.

Things you should try:

1 - Read the documentation of the material library. Depending on the material library you are using, they may provide a custom way to overpass their basic styles. Some do, other don't. Please be sure to check their documentation to see if this is the case.This is always the best option as you are ensuring the material will work as designed and will not cause any bugs or conflicts.

2 - Give an id to your element and place your custom styles on the id. This works because CSS styles are defined based on specificty precedence. As ids are more specific than classes, these styles have priority over the ones defined by classes.

Example:

html:

<main class="page-body" id="page-body"> ...</main>

css:

#page-body {
  padding-right: 0;
  padding-left: 0;
}

3 - If nothing else seems to work and you really need to replace the material style, you could use !important. But please note that this is a bad practice and many state that !important really shouldn't exist in the first place, as if your need to use it is because you are not understanding css precedences rules and you are just hacking the css logics.

Putting this duscission aside, you may place !important after your declaration and this is going to enforce your rule over any other that might exist.

Example:

.page-body {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

Did I mention this is a bad idea?

If you want to read more about css precedence:

How to apply styling for 3rd party css framework like bootstrap

1 Answers1