你可以使用styled-components来更改Antd复选框的默认样式。下面是一个示例代码:
首先,确保你已经安装了styled-components和Antd:
npm install styled-components antd
然后,你可以创建一个名为CustomCheckbox的组件,并使用styled-components来定义它的样式:
import React from 'react';
import { Checkbox } from 'antd';
import styled from 'styled-components';
const StyledCheckbox = styled(Checkbox)`
// 修改复选框的大小
& .ant-checkbox-inner {
width: 20px;
height: 20px;
}
// 修改复选框的颜色
& .ant-checkbox-checked .ant-checkbox-inner {
background-color: black;
border-color: black;
}
`;
const CustomCheckbox = (props) => {
return ;
};
export default CustomCheckbox;
在这个示例中,我们使用styled-components的styled
函数来创建一个自定义的StyledCheckbox组件,并通过继承Antd的Checkbox组件来实现它。我们使用CSS选择器来修改复选框的大小和颜色。
最后,你可以在你的应用程序中使用CustomCheckbox组件来替代Antd的Checkbox组件:
import React from 'react';
import CustomCheckbox from './CustomCheckbox';
const App = () => {
return (
Custom Checkbox
);
};
export default App;
通过这种方式,你就可以将Antd复选框的默认样式改变为更大的黑色复选框。你可以根据需要进一步修改样式。