如何使用多个选择器重用相同的样式规则

Question

我想要这个使用 jss 样式。

.a{
height: 20px;
}
.b{
height: 40px;
}
.a,.b{
width: 100px;
}

尝试 1

制定规则c并将类添加到两者a和b

c: {
width: '100px'
}

尝试 2

制作一个对象common并将它们合并到两者a并b统治

const common = {
   width: '100px',
};

a: {
height: '20px',
...common
}
b: {
height: '40px',
...common
}

有没有更好的办法？

Answer 1

扩展插件如何（默认启用）？

https://cssinjs.org/jss-plugin-extend

const styles = {
  buttonColor: {
    background: 'red'
  },
  button: {
    extend: 'buttonColor',
    fontSize: '20px'
  }
}

Answer 2

我觉得更容易解析的一个更简单的替代方案是通过用引号括起来将键设置为字符串：

'.a, .b': {
   width: 100px; 
}