直接上結(jié)論，使用 css module 做樣式隔離，然后在隔離樣式下用 :global 把antd穿透樣式包住，示例如下
index.jsx

import React from "react";
import style from "./index.module.scss"; // 樣式隔離
import { Button, Checkbox, Form, Input } from "antd";
const Login = () => (
  <div className={style.loginPage}>
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      style={{
        margin: "0 auto",
        maxWidth: 600,
      }}
      autoComplete="off"
    >
      <Form.Item
        label="用戶名"
        name="username"
        rules={[
          {
            required: true,
            message: "請輸入用戶名",
          },
        ]}
      >
        <Input />
      </Form.Item>
    </Form>
  </div>
);
export default Login;

index.module.scss

.loginPage {
  margin-top: 20px;
  //樣式穿透
  :global {
    .ant-form {
      background-color: #f00;
    }
  }
}

參考文章 https://juejin.cn/post/6943774663524745247