1

我正在使用使用3rd party react 组件，但我无法正确配置我的 sass。这个组件创建了一系列<li>html 标签，如果其中一个<li>被点击，它会添加一个“活动”类名：<li class="active">. 我想为该活动 <li>元素自定义 css。为此，我创建了一个包含以下内容的 Test.scss 文件：

.tag_input li.active {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}

要使用这种样式，我做了以下反应

import classes from './Test.scss'
export const Test = (props) => {
  return (
    <ReactTags
        classNames={{
            tags: classes.tag_input,
        }}
     ... 
    >
  )
}

问题是，当 Webpack 加载这个 Sass 文件时，它使用css-loader，它将每个本地 .sass 文件中的每个类名转换为以下格式：“localIdentName=[name]_[local]__[hash:base64:5] ”。这意味着我的 css 不再适用于<li class="active">. 相反，它现在适用于<li classname="Test__active___2LBGS">. 到目前为止，我已经想到了两个（坏的）解决方案：

  1. 我以某种方式重新配置 webpack 以不使用 localIdentName 重命名某些 css 类名
  2. 我以某种方式<ReactTags />使用了类名：Test__active___2LBGS

这些似乎都不可行，所以我很困惑！任何帮助深表感谢。

4

2 回答 2

1

如本地范围下的css-loader 文档中所述，您可以将 :global 应用于样式，您不希望加载器进行转换：

:global (.tag_input li.active) {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}
于 2016-07-26T16:45:39.390 回答
0

您应该使用 className 道具并设置活动状态，您将更新道具

<ReactTags className={props.active ? classes.tagInputActive : classes.tagInput}/>
于 2016-07-26T16:48:00.800 回答