ant-design / ant-design/pro-components
🐛[BUG] ProList设置actions后会导致ProCard的actions样式错乱。
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 bug 描述
ProList设置cardActionProps为actions后会和ProCard的actions样式冲突，先加载的样式会生效，后加载的样式会错乱
### 💻 复现代码
```
import { ProList, ProCard } from '@ant-design/pro-components';
import { Progress, Tag } from 'antd';
const data = [
'语雀的天空',
'Ant Design',
'蚂蚁金服体验科技',
'TechUI',
'TechUI 2.0',
'Bigfish',
'Umi',
'Ant Design Pro',
].map((item) => ({
title: item,
subTitle: 语雀专栏,
actions: [邀请, 删除],
avatar:
'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
content: (
),
}));
export default () => {
return (
测试按钮]}
hoverable
bordered
>
测试内容
pagination={{
defaultPageSize: 8,
showSizeChanger: false,
}}
showActions="hover"
rowSelection={{}}
grid={{ gutter: 16, column: 2 }}
onItem={(record: any) => {
return {
onMouseEnter: () => {
console.log(record);
},
onClick: () => {
console.log(record);
},
};
}}
metas={{
title: {},
subTitle: {},
type: {},
avatar: {},
content: {},
actions: {
cardActionProps: 'actions',
},
}}
headerTitle="卡片列表展示"
dataSource={data}
/>
);
};
```
### 🚑 其他信息
#### 图一：
#### 图二：
Contributor guide
Research direction
Start with the provided ProList and ProCard reproduction, focusing on ProList's metas.actions cardActionProps="actions" entry point and ProCard's actions styling. Confirm the conflict when both components render actions, then verify that each component keeps the intended styles without depending on load order.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100