🧐[问题] ProList卡片列表的选中样式

[Eliot00]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

卡片列表支持rowSelection，但是选中后没有选中的样式

💻 示例代码

🚑 其他信息

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

可以在 ProList 中设置 rowSelection 属性，来实现列表项的勾选功能。同时，可以通过 rowClassName 属性来自定义选中项的样式。

例如，可以在 rowClassName 中判断当前行是否被选中，来设置不同的样式：

import { ProList } from '@ant-design/pro-list';

function MyComponent() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // ...

  return (
    <ProList
      rowKey="id"
      headerTitle="My List"
      dataSource={dataSource}
      rowSelection={{
        selectedRowKeys,
        onChange: setSelectedRowKeys,
      }}
      rowClassName={(record, index) =>
        selectedRowKeys.includes(record.id) ? 'selected-row' : ''
      }
      // ...
    >
      {/* ... */}
    </ProList>
  );
}

在 CSS 中，为 .selected-row 添加对应样式：

.selected-row {
  background-color: #c8e6c9;
}

具体代码示例可以参考 Ant Design 官方文档。

[su1924]

@chenshuai2144 很好奇，明明就有选中的样式，为啥加了rowKey就用不了，要这么麻烦的实现选中状态？