Node + React - CSS類名稱

我目前使用的是react-starter-kit，並且有幾個響應組件，每個響應組件都有自己的樣式文件（scss）。基本上，每一個部件的進口頂部造型文件中像：現在Node + React - CSS類名稱

import s from './Header.scss';

，對於沒有連字符CSS類（如：「通知」），我可以使用它沒有任何問題，但我不明白如何使用帶連字符的css類：

render() { 
return (
    <div className={s.header-inner}> </div> 
); 
}

這顯然會引發一個錯誤：'inner is undefined'。

我改變了header-inner爲header_inner和我的組件相同，它工作正常，但我不能這樣做，因爲我的CSS文件是相當巨大的數百個類。

任何幫助將非常感激。

感謝

-不是有效的標識字符，所以你的原始代碼將被評估爲：

s.header - inner

您還沒有定義了一個名爲inner變量，這樣你就會得到一個參考錯誤。

但是，任何字符都可以用來組成對象的關鍵字，因此您可以使用字符串來訪問您想要的屬性。

return (
    <div className={s['header-inner']}> </div> 
);

2016-03-06 13:25:34

是的，太感謝了！ –

s['header-inner']

在Javascript中，點號是爲了方便，但它並不適用於非法變量的工作。在這種情況下，請使用括號表示法。

另外，無關，但你很可能很快就會遇到這種情況：JavaScript中的CSS樣式被轉換爲camelCase。所以，如果你正在設置一種風格：

<div style={{ backgroundColor: '#FFF', zIndex: 3 }} />

2016-03-06 13:26:27

是的，明白了。謝謝！ –

你可以設置css類點而不使用括號內的字符串。

如果您設置的WebPack配置的CSS-裝載機

css-loader?camelCase

現在你可以做這樣的事情

<div className={s.headerInner}> </div>

2016-10-19 03:48:56 paibamboo

回答