nth-child() 无法与材料 UI 配合使用

Question

我试图使用 nth-child 使两个段落具有不同的背景颜色。对于 JSX 我有

<div className={classes.paragraphs}>
    <p>Test 1</p>
    <p>Test 2</p>
</div>

对于我的CSS

const useStyles = makeStyles(() => ({

  paragraphs: {
    backgroundColor: "blue",
    "&:nth-child(1)": {
       backgroundColor: "green"
    }
  }
}));

使用此 CSS，两个段落都有蓝色背景，但第一个段落应该有绿色背景。

Answer 1

我会说尝试"p:nth-child(1)"而不是"&:nth-child(1)"因为你的孩子是<p>。