Exploring the world of Material UI styling for the first and probably last time, I find myself in a bit of a bind. In my current code setup, I have a question regarding the following structure:
.map(section => (
<Section className={classNames(classes.section, section.class)}>
<div className={classes.content}>
...
</div>
</Section>
))
The sections are generally named like Section1, etc. To customize these styles, I attempted the following approach:
{
section: {},
Section1: {
backgroundColor: 'black',
'& img': { ... }
content: { border: '1px solid pink' }
}
}
However, despite my efforts, the pink border does not seem to be applying as expected.
I did notice that images within the sections were styled correctly. The generated code revealed:
.makeStyles-Section1-415 {
content: [object Object];
}
.makeStyles-Section1-415 img {
margin-left: 400px;
}
It appears that the MUI class generator struggles with producing inner class names. This presents a challenge when trying to target specific elements using selectors like & .content.
So, the big question remains: what is the secret to making this styling setup work seamlessly?
p.s.
If resorting to something drastic like:
{
Section1Content: {}
}
is truly the only solution, then it may just be time to consider scrapping this styling system altogether.