使用 css 类名和 react-virtualized 或 react-select
Working with css classnames and react-virtualized or react-select
所以我正在尝试将这两个模块集成到我的项目中,但我很难处理它的 CSS 部分。
我的项目使用 postcss 将我自己的 css 文件转换为 "compiled" 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 工作的情况下导入它。
但是,我不知道这是否是最好的方法,因为它非常明确地使用这些模块。
有没有人有更好的解决方案?
您有 2 个选择:
- 告诉 react-virtualized 你的 CSS 正在使用生成的 class 名称。
- 告诉你的 CSS 加载器不要转换 react-virtualized 特定的默认 class 名称。
对于选项 1,请查看 react-virtualized 文档。例如,查看 List
component。它接受 className
属性 指定要附加到外部元素的外部 CSS class 名称。由于您呈现自己的 List
行,您还可以将自定义 class 名称附加到这些元素。
对于选项 2,使用 react-virtualized 的默认 class 名称(也在项目文档中列出)并告诉您的 CSS 加载器不要通过将它们包装在 :global(...)
语句(如docs所示)。
所以我正在尝试将这两个模块集成到我的项目中,但我很难处理它的 CSS 部分。
我的项目使用 postcss 将我自己的 css 文件转换为 "compiled" 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 工作的情况下导入它。 但是,我不知道这是否是最好的方法,因为它非常明确地使用这些模块。
有没有人有更好的解决方案?
您有 2 个选择:
- 告诉 react-virtualized 你的 CSS 正在使用生成的 class 名称。
- 告诉你的 CSS 加载器不要转换 react-virtualized 特定的默认 class 名称。
对于选项 1,请查看 react-virtualized 文档。例如,查看 List
component。它接受 className
属性 指定要附加到外部元素的外部 CSS class 名称。由于您呈现自己的 List
行,您还可以将自定义 class 名称附加到这些元素。
对于选项 2,使用 react-virtualized 的默认 class 名称(也在项目文档中列出)并告诉您的 CSS 加载器不要通过将它们包装在 :global(...)
语句(如docs所示)。