使用 css 类名和 react-virtualized 或 react-select

Posted

技术标签:

【中文标题】使用 css 类名和 react-virtualized 或 react-select【英文标题】:Working with css classnames and react-virtualized or react-select 【发布时间】:2017-10-21 05:03:49 【问题描述】:

所以我正在尝试将这两个模块集成到我的项目中,但我在处理它的 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 工作的情况下导入它。 但是,我不知道这是否是最好的方法,因为它非常明确地使用这些模块。

谁有更好的解决方案?

【问题讨论】:

【参考方案1】:

你有两个选择:

    告诉 react-virtualized 你的 CSS 使用的是什么生成的类名。 告诉您的 CSS 加载器不要转换 react-virtualized 特定的默认类名。

对于选项 1,请查看 react-virtualized 文档。例如,查看List component。它接受 className 属性,该属性指定要附加到外部元素的外部 CSS 类名称。由于您呈现自己的 List 行,因此您还可以将自定义类名称附加到这些元素。

对于选项 2,使用 react-virtualized 的默认类名(也在项目文档中列出)并告诉您的 CSS 加载器不要通过将它们包装在 :global(...) 语句中来破坏它们(如 docs 所示)。

【讨论】:

非常感谢!我明白它现在应该如何更好地工作了。我想使用原始类名,因为其中一些不能“注入”并更改为我自己的类名。比如:ReactVirtualized__Table__headerRow。此外,我认为因为 react-virtualized 在内部使用了类名模块,所以我也能够以某种方式利用它(使用哈希而不是真实的类名)

以上是关于使用 css 类名和 react-virtualized 或 react-select的主要内容,如果未能解决你的问题,请参考以下文章

使用 css 类名和 react-virtualized 或 react-select

为啥顺风 css 类名中有反斜杠?

在jquery中怎么使用css 类名和id 来获得元素

Vue中对比scoped css和css module的区别

如何使用 css 模块同时应用两个类名?

React使用css module和className多类名设置