🐛[BUG] ProList设置actions后会导致ProCard的actions样式错乱。

[mengsui]

🐛 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: <Tag color="#5BD8A6">语雀专栏</Tag>,
  actions: [<a key="run">邀请</a>, <a key="delete">删除</a>],
  avatar:
    'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
  content: (
    <div
      style={{
        flex: 1,
      }}
    >
      <div
        style={{
          width: 200,
        }}
      >
        <div>发布中</div>
        <Progress percent={80} />
      </div>
    </div>
  ),
}));

export default () => {
  return (
    <div
      style={{
        margin: -24,
        padding: 24,
      }}
    >
      <ProCard
        title="测试UI样式"
        actions={[<a key="test">测试按钮</a>]}
        hoverable
        bordered
      >
        测试内容
      </ProCard>
      <div style={{ width: 100, height: 30, }}></div>
      <ProList<any>
        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}
      />
    </div>
  );
};

🚑 其他信息

图一：

图二：

[kaidouya]

我也遇到跟你一样的问题 我是使用路由切换页面后下面action的樣式会跑掉 前提是上一个页面有使用ProList设置actions的组件 切换到下一个页面也是有使用ProList设置actions的组件，這时就会遗失样式，然後畫面重新整理就又恢復了，超詭異 还在找原因就刚好看到你的issue

[mengsui]

目前我发现ProList里面引用的是CheckCard，CheckCard和Card引用的是同一个Actions组件。

Actions使用@ant-design/cssinjs的时候使用的组件的名字设置的useStyleRegister的path，但是我没有找到对应useStyleRegister对应的path参数的具体文档。

我测试了下，如果我把Actions的useStyle改为下面的代码是可以解决这个问题的。

export default function useStyle(prefixCls?: string) {
  return useAntdStyle(`ProCardActions${prefixCls}`, (token) => {
    const proCardActionsToken: ProCardActionsToken = {
      ...token,
      componentCls: `.${prefixCls}`,
      cardActionIconSize: 16,
    };

    return [genActionsStyle(proCardActionsToken)];
  });
}

如图：

我猜想prefixCls变化后组件名称没有变化导致缓存的值没更新。

[zhuba-Ahhh]

可以提个pr

[mengsui]

useAntdStyle是个通用方法，我这种写法破坏了规范，我暂时没有好的想法可以解决这个问题。