Css 网格和伪选择器不能正确使用材质ui

我使用纯CSS使用以下样式，但使用材质ui时，伪选择器不起作用

five: {
    display: 'grid',
    position: 'relative',
    gridTemplateColumns: 'repeat(3, 2fr)',
    '&:nth-child(4)': {
        gridColumn: '1/3',
        gridRow: '2'
    },
    '&:nth-child(5)': {
        gridColumn: '2/6',
        gridRow: '2'
    }
}

目标是具有以下布局，其中“O”仅为空白，X为元素：

xOxOx

O X O X O

---

在没有伪选择器的情况下是否可以执行此操作，或者当前代码中是否有我丢失的错误？

此处的伪选择器对我来说工作正常：。请提供重现问题的代码沙盒。请显示使用这些样式的代码。