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 回答