CODEWITHSUNDEEP
htmlcsscss-selectorscss-specificity
frre tyy
frre tyy

Reputation: 363

How to separate css rules for files in react?

I am working on two pages in reactjs. One is a landing page and the other is an articles page. The problem I am having is the CSS rules for the landing page are affecting the appearance of the articles page. I think this has to do with reactjs since it bundles all CSS files into one. How do I separate the CSS rules for each page so that the CSS rules of one page do not affect the appearance of another?

Upvotes: 2

Views: 10135

Answers (2)

MING WU
MING WU

Reputation: 3126

I personally think the easiest way is to write css in js. There is no need to separate css from js. Just write them together. For example,

const newComponent=props=>{
   <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
     <button type="primary">Confirm</button>
     <button type="primary">Cancel</button>
   </div>
}

You can also refer to a third library, radium, which helps you write more advanced css. https://formidable.com/open-source/radium/

If you are going to learn react native in the future, you will find out that all css is written in js. I hope that this helps.

Upvotes: 0

Suresh Karia
Suresh Karia

Reputation: 18238

give unique class/id to body or make a wrapping div for each page like

<body class="landing-page"> or <div class="landing-page"> and <body class="article-page"> or <div class="article-page">

then write css like:

.lanading-page .your-selector{
    cssrules
}

Other options:

Upvotes: 2

Related Questions