使用css類名和反應 - 虛擬化或反應選擇

所以我試圖將這兩個模塊集成到我的項目中，並且我在處理其CSS部分時遇到困難。使用css類名和反應 - 虛擬化或反應選擇

我的項目是使用postcss將我自己的css文件轉換爲「已編譯的」css文件，每個文件都添加了類名。 react-virtualized和react-select都有自己的CSS文件來定義樣式，但我不明白我可以重寫它們或將它們集成到我的項目中。

我的WebPack CSS配置如下：

[ 
{ loader: 'style-loader' }, 
{ 
    loader: 'css-loader', 
    options: { 
    localIndentName, 
    sourceMap: true, 
    modules: true, 
    importLoaders: 1 
    } 
}, 
{ 
    loader: 'postcss-loader', 
    options: { 
    plugins: [ 
     postcssImport({ path: path.resolve(PATHS.app, './css') }), 
     postcssCssnext({ browsers: ['> 1%', 'last 2 versions'] }), 
     postcssReporter({ clearMessages: true }) 
    ] 
    } 
}] 

{ 
    test: /\.css$/, 
    use: loaders 
}

，當我在我的主要app.js文件做以下行，然後我得到的CSS（意外令牌）的失敗解析錯誤。

import 'react-virtualized/styles.css';

唯一的辦法，我能夠加載CSS樣式使用

import '!style-loader!css-loader!./css/unstyled/react-virtualized.css';

意義，整個CSS複製到我自己的項目和進口它沒有postcss工作。但是，我不知道這是否是最好的方式，因爲它非常明確地使用這些模塊。

有沒有人有更好的解決方案？

來源

2017-05-21 Slava Balabanov

你有2種選擇：

告訴反應虛擬化產生什麼你的CSS正在使用的類名。
告訴你的CSS加載器不要轉換react-virtualized特定的默認類名稱。

對於選項1，請查看react-virtualized文檔。例如，看看List component。它接受className屬性，該屬性指定將哪個外部CSS類名稱附加到外部元素。由於您呈現自己的List行，因此您還可以將自定義類名稱附加到這些元素。

對於選項2，使用反應虛擬化的默認類名（在項目文檔還列出），並告訴你的CSS加載器不是在:global(...)聲明包裹它們（如圖所示docs）到裂傷他們。

來源

2017-05-21 14:34:49 brianvaughn

非常感謝！我明白現在應該如何更好地工作。我想使用原來的類名，因爲它們中的一些不能被「注入」並改爲我自己的類名。像：ReactVirtualized__Table__headerRow。此外，我認爲，因爲react-virtualized在內部使用classnames模塊，我將能夠以某種方式利用它（有一個散列而不是真正的類名） –

使用css類名和反應 - 虛擬化或反應選擇

回答

相關問題