Isolating css classes in react project

Question

I have to files bootstrap-iso.css and public-iso.css and component of name publicRoute which uses public-iso.css as it's base. However I have some parts in publicRoute that want to use bootstrap-iso, but without this public-iso css.

    const PublicRoute = ({ component: Component, sendMail, ...rest }) => {

    //Some code ...

     return(
    <div className="public-iso">

    //Some code ...
    
    <Route {...rest} component={(props) => (

    //Some code ...

    <Component {...props} />

    //Some code ...

    )}
    
    </div>
)}

And this Component have some part which need only bootstrap-iso.

const DirectComponent = () =>{

...Some code

return(
<div className="bootstrap-iso">

...some code

</div>

)}

Which finally leads to situation where:

<div className="public-iso">
   ...
   <div className="bootstrap-iso">
      <DirectComponent/>
   </div>
</div>

And I know, that I could just add public-iso class to all single components instead of adding it to whole PublicRoute component but it would be too redundant. So how can I exlude DirectComponent from range of public-iso class?

tsfahmad · Accepted Answer · 2020-07-13 10:43:50Z

1

Excluding won't be possible but you might try overriding the css in this way

.public-iso .bootstrap-iso {
  ----
}

Since it will take higher precedence. Hope it helps.

answered Jul 13, 2020 at 10:43

tsfahmad

4044 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Isolating css classes in react project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related