如何編寫嵌套樣式？

我使用react.js和我有我的WebPack簡單的規則如何編寫嵌套樣式？

 { 
      test: /\.css$/, 
      exclude: /node_modules/, 
      use: [ 
       {loader: 'style-loader'}, 
       {loader: 'css-loader', options: {modules: true}} 
      ] 
     }

我做的一切，我處理我的CSS樣式與風格和CSS裝載機的幫助，所以我可以寫模塊，一切正常的CSS很好，但我不明白怎麼寫嵌套樣式，例如我有這樣

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import ButtonCSS from "./button.css"; 
import HeaderCSS from "./header.css"; 
import ArticleCSS from "./article.css"; 

const Button = ({title}) => { 
    return (
     <div className={ButtonCSS.defaultButtonStyle}> 
      {title} 
     </div> 
    ); 
}; 

const Page =() => { 
    return (
     <div> 
      <header className={HeaderCSS.defaultStyle}> 
       <Button title="Search" /> 
      </header> 
      <article className={ArticleCSS.defaultStyle}> 
       <Button title="Registration" /> 
      </article> 
     </div> 
    ); 
}; 

ReactDOM.render(
    <Page />, 
    document.querySelector('.container') 
);

這裏JSX代碼我想要什麼我的默認項目按鈕將紅色搜索，橙登記，但樣式按鈕和標題在不同的.css文件中，並且它們被編譯爲隨機哈希，如下所示：

<div class="container"> 
    <div data-reactroot=""> 
     <header class="_1drImxMAqFTeL1TQCthA-D"> 
      <div class="_1Itfki2yr_IamWL2zkYKwW">Registration</div> 
     </header> 
     <article> 
      <div class="_1Itfki2yr_IamWL2zkYKwW">Registration</div> 
     </article> 
    </div> 
</div>

，所以我不能只是單純的喜歡寫東西

header .magic { 
    do something ... 
}

如果我將開始在我所有的.css文件使用:global，這將是在所有使用模塊的地步？

來源

2017-10-12 MyMomSaysIamSpecial

您應該使用組合：https://github.com/css-modules/css-modules#composition。

這樣，你將有兩個類擴展一個包含所有常用css的類。

來源

2017-10-12 14:46:54 Axnyff

所以要改變按鈕的風格，我需要在'button.css'中創建額外的風格，然後從'header.css'編寫樣式，然後以某種方式使用由'header.css'風格組成的新'button.css'反應組件，並重復所有這一切，每次我想使用我的默認項目按鈕的地方？ – MyMomSaysIamSpecial

如何編寫嵌套樣式？

回答

相關問題