Multiple style extend on reactjss not working

Question

I am using the array to have multiple extend on react-jss, but it dosent work.

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

This is the error.

The question has been down voted. Is there a reason for that? — Prashant Sharma, May 14 '20 at 15:15

score 0 · Answer 1 · answered May 14 '20 at 15:28

To resolve this we need to create object of styles needed to extend and pass the objects to the array

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

Multiple style extend on reactjss not working

1 Answers1