🐛[BUG] ProTable Toolbar 中的样式污染全局，导致 antd Tag 样式问题

[std4453]

🐛 bug 描述

ProTable 的 Toolbar 组件包含以下样式：

https://github.com/ant-design/pro-components/blob/96a64c35d0fc6a359a4ff3d36b96f510f4580c63/packages/table/src/components/ToolBar/index.less#L28-L45

这段样式影响了 .antd-pro-table 类，污染了全局样式，从 commit 记录看不出为什么要这么写。

结果上，这导致 Tag 等组件在移动端渲染不正常：

📷 复现步骤

CodeSandBox (CSB 似乎无法正常编译 antd)

代码：

import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import "@ant-design/pro-components/dist/components.css";
import { Tag } from "antd";
import "antd/dist/antd.min.css";
import { useRef } from "react";
import request from "umi-request";

const columns: ProColumns[] = [
  {
    title: "标题",
    dataIndex: "title",
    copyable: true,
    ellipsis: true,
    tip: "标题过长会自动收缩",
    formItemProps: {
      rules: [
        {
          required: true,
          message: "此项为必填项"
        }
      ]
    }
  },
  {
    disable: true,
    title: "标签",
    dataIndex: "labels",
    search: false,
    renderFormItem: (_, { defaultRender }) => {
      return defaultRender(_);
    },
    render: (_, record) => <Tag>content</Tag>
  }
];

export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <ProTable
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params = {}, sort, filter) => {
        console.log(sort, filter);
        return request("https://proapi.azurewebsites.net/github/issues", {
          params
        });
      }}
      editable={{
        type: "multiple"
      }}
      rowKey="id"
      pagination={{
        pageSize: 5,
        onChange: (page) => console.log(page)
      }}
      dateFormatter="string"
      headerTitle="高级表格"
    />
  );
};

🏞 期望结果

如同 PC 端一样正常渲染

© 版本信息

• ProComponents 版本：1.1.7
• 浏览器环境：Chrome 103
• 开发环境：Mac

[chenshuai2144]

为了坚决小屏幕下 table 变形的问题，你可以复写一下绕开，或者设置一个宽度