[英]How to separate css rules for files in react?
我正在reactjs中的兩個頁面上工作。 一個是登錄頁面，另一個是文章頁面。 我遇到的問題是登錄頁面的CSS規則正在影響文章頁面的外觀。 我認為這與reactjs有關，因為它將所有CSS文件捆綁在一起。 如何分隔每個頁面的CSS規則，以使一個頁面的CSS規則不會影響另一頁面的外觀？
為正文指定唯一的類/ id，或為每個頁面制作一個包裝div，例如
<body class="landing-page"> or <div class="landing-page">和<body class="article-page"> or <div class="article-page">
然后像這樣寫css：
.lanading-page .your-selector{
cssrules
}
其他選項：
我個人認為最簡單的方法是用js編寫CSS。 無需將CSS與JS分開。 只是一起寫。 例如，
const newComponent=props=>{
<div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
<button type="primary">Confirm</button>
<button type="primary">Cancel</button>
</div>
}
您還可以參考第三個庫Radium，它可以幫助您編寫更高級的CSS。 https://formidable.com/open-source/radium/
如果將來要學習本機響應，您會發現所有css都是用js編寫的。 我希望這個對你有用。
可以使用某些方法來實現帶范圍的CSS。 但是，最好的和最簡單的方法是css-modules 。
此外，你可能會發現這個文章有用。
如何在 react-static 中為每個頁面生成單獨的 css 文件
[英]How to generate separate css files for each page in react-static
如何讓2個CSS文件一起工作？ - 問題！重要的重寫規則
[英]How to get 2 CSS files to work together? - Problem with !important overriding rules
HTML文件中有多個“ HTML”標簽：當類和ID可以相同時，如何分隔CSS規則？
[英]multiple “HTML” tags in HTML file: how to separate CSS rules when classes and id's can be the same?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.