Here's a perplexing query that's been on my mind lately. I have this object with all the styles I need to apply to an element in my React app.
const LinkStyle = {
textDecoration : 'none',
color : 'rgba(58, 62, 65, 1)',
'&:hover' : {
backgroundColor : 'rgba(238, 240, 243, 1)'
},
mx : {lg : 2, md : 2, sm : 2, xs : 2},
}
I'm using it in my component like this:
<SomeDOMelememt style={({condition}) => condition ? LinkStyle : (LinkStyle) + 'border-radius : '20px''} />
Instead of creating a whole new object for the case when '!condition', I want to enhance the existing 'LinkStyle' object by adding some extra properties to cover both scenarios.
I prefer not to create a separate object or add more conditional styling directly to <SomeDOMElement/>.