Exploring the world of React and MUI styled components for the first time. Currently, I'm delving into grid layouts and trying to style all children of a specific component. My goal is to target ${Item1}:nth-child(3n-1), ${Item2}:nth-child(3n-1), ${Item3}:nth-child(3n-1), but my approach seems to be incorrect:
const Grid = styled('div')(({ theme }) => ({
width: '100%',
height: '100%',
padding: 0,
display: 'grid',
gap: 0,
gridTemplateColumns: 'repeat(3,minmax(0,1fr))',
`${Item1}:nth-child(3n-1)`: {
backgroundColor: 'lightYellow'
},
gridTemplateColumns: 'repeat(3,minmax(0,1fr))',
`${Item2}:nth-child(3n-1)`: {
backgroundColor: 'lightGreen'
},
gridTemplateColumns: 'repeat(3,minmax(0,1fr))',
`${Item3}:nth-child(3n-1)`: {
backgroundColor: 'lightBlue'
}
}
const Item1 = styled('div')(({ theme }) => ({
...
}));
const Item2 = styled('div')(({ theme }) => ({
...
}));
const Item3 = styled('div')(({ theme }) => ({
...
}));
<Grid>
<Item1 />
<Item2 />
<Item3 />
<Item1 />
<Item2 />
<Item3 />
<Item1 />
<Item2 />
<Item3 />
<Grid>