直接上结论,使用 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;
}
}
}