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
const App = () => {
return (
<Button>
<DownloadOutlined style={{color:"purple"}}/>
<span style={{ color: "black" }}>My Button</span>
</Button>
);
};
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.
Try this:
const App = () => {
return (
<Button type="primary" style={{color: "black"}}>
<DownloadOutlined style={{color: "purple"}} />
My Button
</Button>
);
};