4

如何根据 GLOBAL 父选择器的存在（在本例中为 isOpen）使用 Sass 和 CSS 模块设置我的 React 组件的样式？

呈现的 HTML：

<div class="isOpen">
   <div class="MyContainer__MyStyle___u9dTa">
      My react component
   </div>
</div>

我的萨斯文件：

.MyStyle
   margin-left: 100px
   color: black

// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.MyStyle
   :global(.isOpen) &
      margin-left: 0
      color: red

上面的代码给出了错误：属性“全局”必须后跟一个“：”

4

2 回答 2

7

虽然我回答有点晚了，但我想我找到了答案，我会把它发布给将来可能遇到这个问题的人。

问题在于，在 Sass 中，您必须转义:global关键字 with\:global才能使 CSS 模块按预期工作。

可以在https://github.com/webpack-contrib/sass-loader/issues/448找到讨论。

于 2017-11-14T06:35:36.267 回答
-2

看起来您在这里遇到了一些问题。

“MyContainer__MyStyle___u9dTa”是一个大类名称。您不能使用句点语法来引用某一部分。但是您可以像这样引用部分类..

*[class=*"MyStyle"]{}

看起来您使用的是 LESS 语法而不是 sass。这是我将如何使用 sass 和部分类引用编写代码的方法

*[class=*"MyStyle"]{
    margin-left: 100px;
    color: black;
}
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.isOpen{
    *[class=*"MyStyle"]{
        margin-left: 0
        color: red
    }
}

祝你好运。值得注意的是，如果这对您来说更容易，您可以在 sass 文件中使用 vanilla CSS。这里有一些 CSS 和 SASS 的资源

http://www.w3schools.com/css/css_syntax.asp

http://sass-lang.com/documentation/

于 2016-10-26T21:19:12.193 回答