CSS模塊和ReactJS：不同組件中的父類和子類CSS類

Question

因此，我構建了一個反應應用程序並提出了一個快速問題。如果我有兩個單獨的組件： 和 分別帶有CSS類navigation.css和navigationLogo.css。在navigation.css我有一個類命名的。主要和navigationLogo.css我想有像這樣一類：

.main .main_in_logo { 
color: red; 
} 

但隨着CSS模塊，我無法做到這一點，對周圍的工作任何想法？

Answer 1

子組件不應該有一個依賴於父css類名的css規則。

孩子應該僅僅是：

.main_in_logo { color: red; } 

如果需要定義同時涉及父母和子女的風格，那麼最簡單的方法就是在父完全定義的樣式：

/* navigation.css */ 
.main .main_in_logo { 
    color: red; 
} 

然後讓父母將css類傳遞給孩子並告訴孩子使用它：

// Navigation.js 
<NavigationLogo className={navigationCss.main_in_logo} /> 

// NavigationLogo.js 
<div className={"foo " + this.props.className}>stuff</div> 

Answer 2

爲什麼你需要創建.main .main_in_logo - 父元素樣式的主要思想是它不會在未來打破你的CSS與其他樣式。但它不可能用css模塊，因爲你的風格將永遠是獨一無二的。

但即使你真的需要它，你可以使用全局CSS來處理這兩個組件 - documentation關於global-css的react-css-modules。