MUI styled组件如何使用伪类选择特定子组件设置样式

问题根因 #

• 未使用计算属性语法：样式对象中使用模板字符串作为键时，没有用方括号[]包裹，模板字符串不会被解析插值，直接作为纯字符串生成选择器，无法匹配目标元素。
• 组件定义顺序错误：Grid的定义早于Item1/Item2/Item3，在Grid的样式配置中插值${Item1}时，Item组件还未声明，插值结果为undefined，无法生成指向目标组件的正确类选择器。
• 样式对象中重复声明gridTemplateColumns属性，属于冗余代码，虽不直接导致失效但建议清理。

修复后代码 #

// 先定义所有子组件
const Item1 = styled('div')(({ theme }) => ({
    // 原有Item1样式逻辑
}));

const Item2 = styled('div')(({ theme }) => ({
    // 原有Item2样式逻辑   
}));

const Item3 = styled('div')(({ theme }) => ({
    // 原有Item3样式逻辑
}));

// 再定义父容器Grid
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'
    },
    [`${Item2}:nth-child(3n-1)`]: {
        backgroundColor: 'lightGreen'
    },
    [`${Item3}:nth-child(3n-1)`]: {
        backgroundColor: 'lightBlue'
    }
}));

// 渲染结构保持不变
<Grid>
    <Item1 />
    <Item2 />
    <Item3 />

    <Item1 />
    <Item2 />
    <Item3 />

    <Item1 />
    <Item2 />
    <Item3 />
</Grid>

补充说明 #

MUI styled组件被作为插值放入样式选择器时，会自动返回该组件生成的唯一类名，只要保证子组件定义在父容器样式定义之前，且使用计算属性语法包裹选择器模板字符串，就能生成正确的嵌套选择器，匹配到对应子元素。

内容的提问来源于stack exchange，提问作者Teamol