使用Styled Components无法设置表格隔行背景色，求排查问题

你的代码问题出在选择器层级错误：

在TR组件中，你写的tr:nth-child(even)是在当前<tr>元素内部寻找子级<tr>，但实际表格里的每行<tr>都是<tbody>的直接子元素，这个选择器根本匹配不到目标行。

两种修复方案 #

方案1：给<tbody>设置隔行样式（推荐，避免影响表头） #

修改TBody组件的样式，在父元素中选择子级的偶数行：

export const TBody = styled.tbody`
  tr:nth-child(even) {
    background-color: #dddddd;
  }
`;

// 保持TR组件原有基础样式即可
export const TR = styled.tr`
  text-align: center;
`;

方案2：在TR组件中用&指代自身 #

如果一定要在TR组件里定义，需要用&符号代表当前组件对应的<tr>元素，这样:nth-child(even)才会作用于自身：

export const TR = styled.tr`
  text-align: center;
  &:nth-child(even) {
    background-color: #dddddd;
  }
`;

⚠️ 注意：这个方案会同时选中<thead>里的<tr>（如果表头只有一行不会有问题，但如果表头有多行就会被影响），所以更推荐方案1。

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