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

Question

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

Answer 1

antd

的正式解决方案是每个组件的 API 中提到的

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

Answer 2

我不熟悉 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;
}

Answer 3

Ant Design 5.x 最佳实践

According to the latest doc，最好的做法是使用

ConfigProvider

：

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

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