How to change text color in a Button?

user_4538768 0
Viewed 136

I was wondering if it is possible to change the color of the text in Antd. For instance, I'd like this button to have the color of the text black#000000 and the icon DownloadOutlined in purple #5e46a1

My code

const App = () => {
  return (
      <Button type="primary">
        <DownloadOutlined/>
        My Button
      </Button>
  );
};

Have not been able to find the correct CSS attributes to inject in style inside DownloadOutlined

Thanks

antd reactjs css javascript
3 Answers
const App = () => {
  return (
    <Button>
      <DownloadOutlined style={{color:"purple"}}/>
      <span style={{ color: "black" }}>My Button</span>
    </Button>
  );
};
user_137344120

Your html code would become:

const App = () => {
  return (
      <Button type="primary" className="custom_btn">
        <DownloadOutlined className="custom_btn_icon"/>
        My Button
      </Button>
  );
};

and your css code would be:

.custom_btn {
  color: #00000 !important; 
}
.custom_btn_icon {
  color: #5e46a1 !important; 
}

Don't forget to use !important to override default antd's styling.

user_83986360

Try this:

const App = () => {
  return (
      <Button type="primary" style={{color: "black"}}>
        <DownloadOutlined style={{color: "purple"}} />
        My Button
      </Button>
  );
};
user_113084870
Related