React CSS 模塊中的級聯樣式

Question

在我的 React 應用程序中，我有一些內聯 JS 樣式和 CSS 類的混亂組合。 我決定將所有內容拆分為我可以這樣使用的 CSS 模塊：

import styles from './ImageTextOption.module.css'

並像使用 JS 對象一樣使用它們。 但是，現在樣式不會從父元素（未在同一模塊中定義）級聯。 我有類似.selected .option-text東西，即使我確實在外面selected類，因為option-text已更改為唯一名稱，它與selected元素內的option-text不匹配。 使用 CSS 模塊再次匹配的正確方法是什么。

Answer 1

我遇到了同樣的挑戰，發現有時將樣式作為道具傳遞給子組件更容易。 如果您在不同的地方重用子組件，這是一個很好的模式。

這是一個完成相同操作的示例。

當然，如果子組件特定於父組件並且只使用一次，或者如果父子組合彼此特定，那么也許一種方法是讓他們簡單地在父級共享 css 導入，然后通過className='將其傳遞給 child

Answer 2

將導入語句更改為：

導入 './<<"PathToCss">>'