使用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类名和反应 - 虚拟化或反应选择

回答

相关问题