Reactjs 风格上的“组合”是什么

我正在使用和一个视图，我可以看到这个代码

// 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>

//src/views/HomeView/HomeView.scss:5
.柜台-绿色{
组成：计数器；
颜色：rgb（25200,25）；
}
//src/views/HomeView/HomeView.js:45
{this.props.counter}

我想知道它有什么作用？

它是用来包含其他规则中的样式的

在本例中，它将

计数器

规则中的样式添加到

计数器-绿色

规则中

对于常规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>

那么我们只需要修饰符类

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

---

与普通的预处理器mixin模型不同，这些样式在编译的CSS中不会重复。相反，

counter--green

的输出类将是两个类名的组合，呈现的版本实际上与编写

counter--green

具有相同的效果！它不添加样式，而是将导入的类名添加到其导出中。

.counter--green

的输出类实际上将变成

.counter.counter--green

。这在跨模块组合时特别有用：因为它引用类名的键，所以它将正确地输出两个类名的哈希类名。

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