React CSS - 如何僅將CSS應用於特定頁面

我正在使用create-react-app，我正在嘗試制定將樣式表應用於特定頁面的「高效」方式。React CSS - 如何僅將CSS應用於特定頁面

我src文件夾結構看起來是這樣的：

| pages 
| - About 
| - - index.js 
| - - styles.css 
| - Home 
| - - index.js 
| - - styles.css 
| index.js 
| index.css

在每個index.js文件我用import './style.css'

然而，我發現，當我從一個頁面瀏覽到下來自起始頁面的樣式正在被應用到目標頁面，就好像它們被緩存並且目標頁面的樣式沒有被遵循一樣。

我只是想知道如果我誤解了如何將樣式應用於React到特定頁面。我是否應該製作完全自包含的組件，它們也會增加風格？

我正在考慮將它們內聯應用，但我意識到使用JS樣式時存在限制。

2017-05-09 tommyd456

創建反應應用程序將所有的CSS文件捆綁成一個，所有樣式將在您的應用程序中的每個地方（每個渲染組件）都可用。請注意，CRA是一個單頁面應用程序（SPA），因此您無法在「頁面」中進行思考，而是在DOM中的「渲染組件」中進行思考。

你有多個解決方案：

1是在你的CSS文件組織：由你的組件名稱，以避免衝突（如BEM）前綴所有的類或使用CSS層次結構.my-component > .my-class {...}

<div className="my-component"> 
    <span className="my-class">Hello</span> 
</div>

2 - 在您的JSX文件中聲明所有樣式：

const styles= { 
    myComponent: { 
    fontSize: 200, 
    }, 
}; 
const myComponent =() => (
    <span style={styles.myComponent}>Hello</span> 
);

缺點是您的樣式默認情況下不是供應商的前綴。

3-彈出或使用反應的腳本的一個叉（CRA的發動機）使用CSSModules（https://github.com/css-modules/css-modules）

2017-05-09 14:38:34 gouroujo

由於陣營主要是用來創建Single Page Applications (SPA)和由該設計意圖是不重新加載整個頁面一遍又一遍。所以樣式表也不會被重新加載。

如果您使用的是像Webpack這樣的捆綁器的React，那麼所有的樣式表都捆綁在一起。這同樣適用於所有React組件。所以你得到捆綁JS和捆綁CSS。

爲什麼你可能想分開樣式表？

第一點是好的。第二點不是一個好的設計，因爲你會創建令人困惑的樣式表規則，它不會使用樣式表的一般部分 - 級聯。

即使CSS文件變得比當前渲染頁面所需要的大一點，我仍建議堅持捆綁方式。

在我的選擇中，React組件不應該依賴於任何樣式表。只需實現一個組件，使其獨立工作（除了子組件），然後在不同的應用程序中將它們用於不同的樣式表。

即使不要爲組件使用內聯樣式表，因爲這會炸掉實際的React組件，特別是當由於整個應用程序中可用的捆綁樣式表而不使用這些內聯樣式時。

2017-05-09 14:47:09 Marc

回答