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

user_3645545 0
Viewed 44013

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?

antd button css
2 Answers

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

Edit quizzical-chatterjee-8vp4v

user_78824700

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;
}
user_18605400
Related