我正在使用antd的应用程序。我需要将默认主按钮的颜色从蓝色更改为灰色。似乎antd没有提供此选项。我如何轻松更改按钮颜色?
s8vozzvw1#
antd的正式解决方案是每个组件的API上提到的style props:
antd
style
<Button type="primary" style={{ background: "red", borderColor: "yellow" }}> Submit </Button>;
此外,当您希望覆盖应用程序中每个组件的样式时,应该覆盖前面提到的CSS类或Customize Theme。
// Should be used for overriding all buttons. // Import the css on entry point. .ant-btn-primary { background-color: red; }
此外,请注意,您可以设置按钮容器的样式并将其颜色作为目标(而不影响整个应用程序样式):
.button-container { .ant-btn-primary { background-color: palevioletred; } }
CSS-in-JS的示例:
const ButtonContainer = styled.div` .ant-btn-primary { background-color: red; } `; const App = () => { return ( <ButtonContainer> <Button type="primary">My Button</Button> </ButtonContainer> ); };
wgx48brx2#
我不熟悉Ant Design,但您可以在他们的文档(Customize Theme)中看到,您可以编辑原色,如下所示:
@primary-color: #1890ff; // primary color for all components
如果你只想改变按钮的颜色,你可以创建一个新的变量:
@button-color: #757575; // a custom variable
然后添加一个规则(该规则将覆盖源):
.ant-btn-primary { background-color: @button-color; }
kxxlusnw3#
根据最新文档,使用ConfigProvider是最佳实践:
ConfigProvider
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b', }, }} > <Button /> </ConfigProvider>
参考:https://ant.design/docs/react/customize-theme#customize-design-token
3条答案
按热度按时间s8vozzvw1#
antd
的正式解决方案是每个组件的API上提到的style
props:此外,当您希望覆盖应用程序中每个组件的样式时,应该覆盖前面提到的CSS类或Customize Theme。
此外,请注意,您可以设置按钮容器的样式并将其颜色作为目标(而不影响整个应用程序样式):
CSS-in-JS的示例:
wgx48brx2#
我不熟悉Ant Design,但您可以在他们的文档(Customize Theme)中看到,您可以编辑原色,如下所示:
如果你只想改变按钮的颜色,你可以创建一个新的变量:
然后添加一个规则(该规则将覆盖源):
kxxlusnw3#
Ant Design 5.x的最佳实践
根据最新文档,使用
ConfigProvider
是最佳实践:参考:https://ant.design/docs/react/customize-theme#customize-design-token