MUI - 如何在特定样式的组件中使用伪类

Question

我不熟悉整个 react 和 MUI 样式的组件。现在我正在处理一个网格，我想为特定组件的所有子组件设置样式。我想做的是${Item1}:nth-child(3n-1)，${Item2}:nth-child(3n-1)，${Item3}:nth-child(3n-1)，但它不是这样工作的：

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>

Answer 1

Item 是Grid 的直接子代，因此您可以使用div > div 选择器：

const Grid = styled('div')(({ theme }) => ({
  ...,
  '& > :nth-child(3n-2)': {
    backgroundColor: 'lightYellow',
  },
  '& > :nth-child(3n-1)': {
    backgroundColor: 'lightGreen',
  },
  '& > :nth-child(3n)': {
    backgroundColor: 'lightBlue',
  },
}));

如果你想定位特定的孩子，你可以添加一个类名来识别它：

const Grid = styled('div')(({ theme }) => ({
  ...,
  '& > .item1': {
    backgroundColor: 'lightYellow',
  },
  '& > .item2': {
    backgroundColor: 'lightGreen',
  },
  '& > .item3': {
    backgroundColor: 'lightBlue',
  },
}));

<Grid>
  <Item className="item1" />
  <Item className="item2" />
  <Item className="item3" />

  <Item className="item1" />
  <Item className="item2" />
  <Item className="item3" />

  <Item className="item1" />
  <Item className="item2" />
  <Item className="item3" />
</Grid>