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

Posted 2023-02-22

【中文标题】如何使用多个选择器重用相同的样式规则

【英文标题】：How to reuse the same style rule with multiple selectors

【发布时间】：2018-01-15 07:52:32

【问题描述】：

我想要这个使用 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

有没有更好的办法？

【参考方案1】：

扩展插件（默认启用）怎么样？

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

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

【参考方案2】：

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

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