Overriding antd component style for just one component-CodePudding

Working with antd components, if you have an Alert component, inside there is a tooltip that is given the styling through ant-alert-icon class. So, if we need to override the Tooltip color, you can have in your stylesheet a class to override the values. For example:

ant-alert-info {
  .ant-alert-icon {
    color: #3d6de7 !important;
  }
}

However, this will apply the color #3d6de7 to all Alerts type Info. How can I apply a different color to just one specific Alert type Info while keeping the styling above for the remaining Alert type Info components? Is this possible? What are the alternatives to doing something similar?

I am able to change the background of the Alert using the style field as follows:

 <Alert
    description={}
    type="info"
    showIcon
    style={!props.alert ? { backgroundColor: "#F4F0F0"} : { backgroundColor: "#fff2f0", border: "#ffccc7" }} 
  />

However, I have not been able to change the Tooltip color.

Thanks!

CodePudding user response：

as you can see you can do this

<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
 <Button>My Button</Button>
</ConfigProvider>

I think you can use ConfigProvider to overwrite Antdesign styles. Check out the link for more info : ConfigProvider

CodePudding user response：

You can set an additional className like ant-alert-info-overwritten this way:

<Alert
   description={}
   type="info"
   showIcon
   className="ant-alert-info-custom ant-alert-info-custom-with-red-icon"
/>

And use it like this:

.ant-alert-info.ant-alert-info-custom {
  // some shared styles by all custom alerts
  .ant-alert-icon {
    color: #3d6de7 !important;
  }
  // specific style for red icon
  &.ant-alert-info-custom-with-red-icon{
    .ant-alert-icon {
      color: red!important;
     }
  }
}