CSS模塊 - 引用來自其他模塊的類

我已經非常瞭解CSS模塊的概念，我相信我不想爲未來做任何其他事情。CSS模塊 - 引用來自其他模塊的類

目前我正在嘗試重構現有的應用程序以使用CSS模塊，該應用程序自從使用了BEM方法以來使用了經典的sass。

在我描述我的問題之前，我想澄清一點，我不明白我正在處理一個不在CSS模塊範圍內的問題。應該將樣式單獨應用於單個模塊中。最多人應該用其他模塊的其他CSS類組成CSS類。但基本上：您構建了一個（HTML-）模塊，並使用CSS模塊來設置該模塊的樣式，就是這樣。

問題出在這裏：在重構的過程中，有一個單一的問題源自擁有基於SASS的風格系統。我無法找到一個有效的方法來處理CSS模塊環境中的CSS類，當此類應該與另一個模塊的另一個類組合使用時。

實施例SASS：

[page.scss]

.wrapper { 
    margin: 0; 
}

[headline.scss]

.headline { 
    color: green; 
} 
.wrapper { 
    .headline { 
     color: orange; 
    } 
}

正如可以看到：一個模塊（頁）定義了一個CSS類「包裝器」，另一個模塊定義了一個CSS類「標題」。而且，此外，類「標題」在放在類「包裝器」內時應該有點不同。

同樣，我知道這不是真正的CSS模塊的領域。但我真的很想知道這是否可以通過CSS模塊進行操作？ CSS模塊的「合成」特徵並不適合這裏...

來源

2017-03-03 hurrtz

你究竟是什麼意思的「CSS組件」？這與ReactJS和Webpack有什麼關係？ – Aaron

你非常正確。我使用了錯誤的術語。我編輯了這篇文章。謝謝！ – hurrtz

這是遷移到CSS模塊時的常見問題。簡而言之，一個CSS模塊不能覆蓋另一個CSS模塊的樣式，這是設計。樣式應該與呈現它們的組件共存，而其他任何地方都沒有。

你可以做什麼來重構這個是創建一個組件樣式變體，並且在你的包裝中呈現時通過一個prop明確地設置變體。

例如，假設您的標題組件目前看起來是這樣的：

CSS

.headline { 
    color: green; 
}

JSX

import styles from "Headline.css"; 
const Headline =() => { 
    return (
    <div className={styles.headline} /> 
); 
}

而不是試圖覆蓋的.headline從別的地方類的名稱，您可以創建一個可通過道具切換變體類名稱：

CSS

.headline-green { 
    color: green; 
} 

.headline-orange { 
    color: orange; 
}

JSX

import styles from "Headline.css"; 
const Headline = ({orange}) => { 
    return (
    <div className={orange ? styles.headlineOrange : styles.headlineGreen} /> 
); 
}

而當你從使它你的包裝，將其設置爲orange變體：

<Headline orange />

提示：您可以使用composes消除變體之間的重複常見樣式。

來源

2017-03-03 21:44:26 Aaron

我不喜歡這種方法，當只需要做一些小的改動時，它會引發多個類。 – exoslav

@exoslav這是CSS模塊背後的哲學的一部分，每個類應該有所有的樣式，但是肯定會有相反的論點。 [這是一個有趣的（和簡短的）線程。]（https://github.com/css-modules/css-modules/issues/63）雖然CSS模塊不會阻止你以任何方式使用多個類，這真的取決於你。這個例子就是CSS模塊推薦的做法。 – Aaron

CSS模塊 - 引用來自其他模塊的類

回答

相關問題