Is there a way to change Antd internal button's color?

Question

I am using antd for my app. I need to change the color of a default Primary Button from Blue to Grey. It seems like antd doesn't provide such an option. How can I change the button color easily?

Answer 1

The formal solution by antd is the style props as mentioned on every component's API:

<Button type="primary" style={{ background: "red", borderColor: "yellow" }}>
  Submit
</Button>;

Moreover, when you want to override the style for every component in your application, you should override the CSS class or Customize Theme as mentioned.

// Should be used for overriding all buttons.
// Import the css on entry point.
.ant-btn-primary {
    background-color: red;
}

Also, note that you can style the button's container and target its color (Without affecting the whole application styling):

.button-container {
  .ant-btn-primary {
    background-color: palevioletred;
  }
}

An example with 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

I'm unfamiliar with Ant Design, but you can see in their docs (Customize Theme) that you're able to edit the primary color like so:

@primary-color: #1890ff; // primary color for all components

In case you want to change only the button's color, you can create a new var:

@button-color: #757575; // a custom variable

and then add a rule (which will override the source):

.ant-btn-primary {
    background-color: @button-color;
}