css 有没有办法改变Antd内部按钮的颜色?

ht4b089n  于 2023-03-20  发布在  其他
关注(0)|答案(3)|浏览(240)

我正在使用antd的应用程序。我需要将默认主按钮的颜色从蓝色更改为灰色。似乎antd没有提供此选项。我如何轻松更改按钮颜色?

s8vozzvw

s8vozzvw1#

antd的正式解决方案是每个组件的API上提到的style props:

<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>
  );
};

wgx48brx

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;
}
kxxlusnw

kxxlusnw3#

Ant Design 5.x的最佳实践

根据最新文档,使用ConfigProvider是最佳实践:

<ConfigProvider
    theme={{
      token: {
        colorPrimary: '#00b96b',
      },
    }}
  >
    <Button />
</ConfigProvider>

参考:https://ant.design/docs/react/customize-theme#customize-design-token

相关问题