'ReactJS styles 'leaking' to other components

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.

javascriptcssreactjs


Solution 1:[1]

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

Solution 2:[2]

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.

Solution 3:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kisho
Solution 2 Stephen D. Williams
Solution 3 M.Ali El-Sayed

Related Questions