So I have two components... a Navbar component, and an AboutPage component.

They are both in the same directory, 'App'

App

-- Navbar --> Navbar.css, Navbar.js

-- AboutPage --> Aboutpage.css, Aboutpage.js

So as you can see, they have two separate stylesheets. In the JS pages the correct CSS file is being imported as well.

When I do a style like this for example:

Navbar Component

p { background: red }

^^ this style also applies to the p's in the Aboutpage. I even tried to give the P in Aboutpage its on id and style it that way and it still failed.

So I have two components... a Navbar component, and an AboutPage component.

They are both in the same directory, 'App'

App

-- Navbar --> Navbar.css, Navbar.js

-- AboutPage --> Aboutpage.css, Aboutpage.js

So as you can see, they have two separate stylesheets. In the JS pages the correct CSS file is being imported as well.

When I do a style like this for example:

Navbar Component

p { background: red }

^^ this style also applies to the p's in the Aboutpage. I even tried to give the P in Aboutpage its on id and style it that way and it still failed.

• javascript
• css
• reactjs

• 1 Dont write style of the tags themselves, write the style on your className or id.. the way you are writing this style will affect all p in the page. – Abba Commented Mar 29, 2018 at 2:54
• so i have to give each element i want to style in react js an id or className in order to style it and not have it conflict with styles from other components? – Eddie Taliaferro Commented Mar 29, 2018 at 3:10

6 Answers 6

That's the expected behaviour.

No matter which file you specify a rule like p { background: red }, it's going to be applied to all DOM. Specifying and id attribute to won't work either. The above rule is general enough to apply to all <p>s.

If you want to specify css files for each component, you should also create component specific css classes. Like the following example.

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  <div className="DottedBox">
    <p className="DottedBox_content">Get started with CSS styling</p> 
  </div>
);

export default DottedBox;

and its css file:

.DottedBox {
  margin: 40px;
  border: 5px dotted pink;
}

.DottedBox_content {
  font-size: 15px;
  text-align: center;
}

If you want different ways of defining css for React, this resource adds 3 more ways of doing so, in addition to the above way.

You can also use css modules. They scope your CSS locally and are awesome

Scoping styles to a component requires WebComponents which relies on several newer browser features, particularly shadowRoot "shadownDOM" which supports this separation directly. These are most easily used with lit-element and/or Polymer 3.

Sometimes we need a global CSS which could affect another component even if we use module import, I didn't find anything to answer that in the official documentation, so my workaround is to use something like the following code in the component itself, and, it works fine :)

        <style>
            {
            `
               @page {
                padding:0;
                margin-top:0;
                margin-bottom: 0;
                margin-left: 0;
                margin-right:0;
            }
            @media print {
              @page {
                size: 80mm 21cm;
             }
            }
            `
            }
        </style>

to prevent effect css class of a component to other components you can try to use .module extension on css file name.

-- Navbar --> Navbar.css, Navbar.js

Rename to

-- Navbar --> Navbar.module.css, Navbar.js

when you add .module extension on css file name, it will only effect a component you will import it.

If you want to check more information, this resource will help

you can consider using custom-prefixed classes. and make use of @at-root and #{&}.

Let's say I want a class prefixed with my component's name "login" :

$prefix : login-;

.#{$prefix} {
    @at-root #{&}fun a {
        animation:blinkingText 1.2s infinite;
    }
    @keyframes blinkingText{
        0%{ color: #000000; }
        49%{ color: #000000; }
        60%{ color: white; }
        99%{ color:white; }
        100%{ color: #000000; }
    }
}

It will produce :

.login-fun a {
    animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText {
  0% { color: #000000; }
  49% { color: #000000; }
  60% { color: white; }
  99% { color: white; }
  100% { color: #000000; }
}

Then, let's assume that you will create your classes using string interpolation in you React component :

import "./style.scss";

const PREFIX = "login"

export BlinkingLink = () => (
    <div className={`${PREFIX}-fun`}>
       <a> Blink ! <a/>
    </div>
)

Like the author said here :

The @at-root will move the code block out of the parent selector and the #{&} will insert the parent selector after the specified prefix.