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

标签 javascript css reactjs styles jss

我想使用 jss 样式。

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

尝试1

创建一个规则c并将该类添加到ab

c: {
width: '100px'
}

尝试2

创建一个对象 common 并将它们合并到 ab 规则

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

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

有没有更好的办法?

最佳答案

如何扩展插件(默认启用)?

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

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

关于javascript - 如何对多个选择器重用相同的样式规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45556538/

相关文章:

css - 为什么 3 x 33% 宽度的列不适合 100% 的容器

html - 文本重叠视频标签 CSS

javascript - 如何处理 React 的 onChange 事件中的小数值输入?

javascript - 如何从可序列化的 JavaScript 对象递归地 trim 字符串值?

javascript - 图像数据的更改未反射(reflect)在 ModelView 中

javascript - 逐字淡入文本,在当前完全可见之前开始淡出下一个单词

html - 为什么textarea高于文本输入?

javascript - 如何在 React 中将这些数据映射到 json 数组?

javascript - 如何在 html css 技巧中单击按钮时显示和隐藏 div?

javascript - 当另一个 div 具有 'bottom-in-view' 使用 JS 或 jquery 路点时,在一个 div 上触发效果