reactjs - `composes` 对样式有何影响

Question

我正在使用https://github.com/davezuko/react-redux-starter-kit我可以看到这段代码的 View 之一

// src/views/HomeView/HomeView.scss:5
.counter--green {
  composes: counter;
  color: rgb(25,200,25);
}

// src/views/HomeView/HomeView.js:45
<span className={classes['counter--green']}>{this.props.counter}</span>

我想知道什么是？

Answer 1

这是 CSS modules syntax用于包含其他规则中的样式。

在本例中，它添加 counter 中的样式。规则，到counter--green规则。

使用常规 CSS，我们必须以这种方式编写 BEM 样式的类。

.counter {
  border-color: red;
  color: red;
  border-bottom: solid 1px;
}

.counter--green {
  border-color: green;
  color: green;
}

然后将它们一起应用于元素。

<div class="counter counter--green"></div>

通过将 block 样式组合到修饰符样式中，我们可以删除多余的类名。

.counter--green {
  composes: counter;
  border-color: green;
  color: green;
}

那么我们需要的只是修饰符类。

<div class="counter--green"></div>

与普通的预处理器 mixin 模型不同，样式不会在编译的 CSS 中重复。相反，counter--green 的输出类将是两个类名的组合，渲染的版本实际上与编写 counter counter--green 具有相同的效果。 .