CODEWITHSUNDEEP
javascriptcssreactjsantd
JarochoEngineer
JarochoEngineer

Reputation: 1787

How to change text color in a Button?

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

Upvotes: 1

Views: 268

Answers (3)

Harshitha
Harshitha

Reputation: 43

Try this:

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

Upvotes: 0

Osama Bin Saleem
Osama Bin Saleem

Reputation: 899

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.

Upvotes: 0

Mohit Kushwaha
Mohit Kushwaha

Reputation: 1041

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

Upvotes: 1

Related Questions