所以我有兩個組件...導航欄組件和AboutPage組件。

它們都在同一個目錄中，“App”

應用

- Navbar - >Navbar.css，Navbar.js

- AboutPage - >Aboutpage.css，Aboutpage.js

如你所見，它們有兩個獨立的樣式表。 在JS頁面中，正確的CSS文件也被導入。

舉例來說，當我創(chuàng)作這樣的風格時:

導航條組件

p { background: red }

^^:這種風格也適用于Aboutpage中的p。我甚至試圖在Aboutpage中給P一個id，并以這種方式設計它，但還是失敗了。

這是意料之中的行為。

不管你在哪個文件中指定了p { background: red }這樣的規(guī)則，它都會被應用到所有的DOM中。 將和id屬性指定為也不起作用。上述規(guī)則足夠普遍，適用于所有& ltp & gt南

如果要為每個組件指定css文件，還應該創(chuàng)建特定于組件的css類。比如下面這個例子。

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;

及其css文件:

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

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

如果您想要為React定義css的不同方法，除了上面的方法之外，本參考資料還添加了另外3種方法。

也可以使用css模塊。他們在本地搜索你的CSS，非常棒

組件的范圍樣式需要WebComponents，它依賴于幾個新的瀏覽器特性，特別是shadow root“shadown DOM ”,它直接支持這種分離。這些最容易與lit-element和/或聚合物3一起使用。

有時我們需要一個全局CSS，即使我們使用模塊導入，它也可能影響另一個組件，我在官方文檔中沒有找到任何答案，所以我的解決方法是在組件本身中使用類似下面的代碼，它工作得很好:)

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

為了防止css類的一個組件影響到其他組件，你可以嘗試使用。css文件名的模塊擴展名。

-導航條-& gt；Navbar.css，Navbar.js

重命名為

-導航條-& gt；Navbar.module.css，Navbar.js

當你加上。css文件名上的模塊擴展名，它只會影響您將要導入的組件。

如果你想查看更多信息，這個資源會有所幫助