How to separate css rules for files in react?

Question

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?

Just a suggestions, but back when I used react, I used styled components with scoped styles. Personally I like the approach of having a single file with all the information for the component — Michael
– Michael, Commented Nov 20, 2018 at 7:17
This problem has nothing to do with React and it seems you do not yet know how to construct CSS in general for web pages. you need to wrap all the CSS rules for a certain page under a "father" rule so they will be encapsulated. this is easier with SCSS or automatic with styled-components. I would suggest giving each page a different class to its wrapper element, like div class="page--home" and so on, then use that class as prefix for all that page's rules. — vsync
– vsync, Commented Nov 20, 2018 at 13:43

Suresh Karia · Accepted Answer · 2018-11-20 07:19:43Z

2

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:

edited Nov 20, 2018 at 7:19

answered Nov 20, 2018 at 7:14

Suresh Karia

18.4k19 gold badges69 silver badges85 bronze badges

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

Comments

MING WU · Accepted Answer · 2018-11-20 07:57:00Z

0

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.

answered Nov 20, 2018 at 7:57

MING WU

3,1561 gold badge15 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to separate css rules for files in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related