reactjss上的多种样式扩展不起作用答案

【问题标题】：Multiple style extend on reactjss not workingreactjss上的多种样式扩展不起作用
【发布时间】：2020-08-30 14:35:05
【问题描述】：

我正在使用数组在 react-jss 上进行多个扩展，但它不起作用。

const styles = (theme) => ({
flexDisplay: {
    display: 'flex',
    'align-items': 'center'
},
headerBackground: {
    'background-color': defaultTheme.headerBackground
},
headerRowCell:{
    extend: ['headerBackground','flexDisplay'],
    'padding': '0.5em 0.5em',
    'color': theme.secondaryTextColor || defaultTheme.secondaryTextColor,
    'text-transform': 'uppercase',
    height: '48px',
}
});

这是错误。

【问题讨论】：

该问题已被否决。这是有原因的吗？

标签： reactjs jss css-in-js

【解决方案1】：

为了解决这个问题，我们需要创建扩展对象并将对象传递给数组所需的样式

const flexDisplay = {
    display: 'flex',
    'align-items': 'center'
};
const headerBackground =  {
    'background-color': defaultTheme.headerBackground
};


const styles = (theme) => ({

headerRowCell:{
    extend: [headerBackground, flexDisplay],
    'padding': '0.5em 0.5em',
    'color': theme.secondaryTextColor || defaultTheme.secondaryTextColor,
    'text-transform': 'uppercase',
    height: '48px',
}
});

【讨论】：