reactjs - reactjss上的多种样式扩展不起作用

Question

我正在使用数组在 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',
}
});

这是错误。

标签： reactjsjsscss-in-js

Answer 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',
}
});