Search code examples
htmlcsscss-selectorscss-specificity

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?

Solution

  • 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: