我有一个使用 Antd 的 React 组件，需要设置每隔一行的背景样式

Question

我有一个使用 Antd 的组件，我正在尝试使用 nth-child() 选择器来设置其他行的背景颜色，但我不知道如何使用 Antd。

我通读了他们的 docs 并尝试通过扩展我的 Collapse 组件的样式添加 ${Row}:nth-child(2){ background-color: white;} 来应用该逻辑，但我收到一个类型错误，指出 typeOf Row 不可分配给类型“CSSObject”

我在下面有一个带有初始样式和布局的代码沙箱。

Answer 1

您可以使用 ant 设计类名称编辑 Body 组件，如下所示：

const Body = styled.div`
    background-color: #f7f7f7;
    .ant-row:nth-child(even) {
        background-color: yellow;
    }
`;