javascript - 材质 ui 具有相同定义的多个类名

Question

在传统的 CSS 中，定义类之间的共享属性通常如下：

.classA,.classB{
  background-color: black;
}

在 Material UI 中，使用主题化，上面的内容可以翻译为：

styles = (theme)=>({
    classA:{
      backgroundColor: 'black'
    },
    classB:{
      backgroundColor: 'black'
    },    
})

我想知道是否有特定的语法来删除上述材料 UI 样式方法中的重复项，即，可以同时定义两个类吗？，如下所示（在伪代码中）：

styles = (theme)=>({
    classA,classB:{
      backgroundColor: 'black'
    }, 
})

标签： javascriptcssstylesmaterial-ui

Answer 1

为什么不为颜色设置一个基类？

blackBg: {
  backgroundColor: 'black'
}

然后使用 classnames 包将多个类名附加到您的元素

import classNames from 'classnames'

...
  <div className={classNames(blackBg, myOtherClass)} />
...