Search code examples
javascriptcssreactjsantd

Overriding antd component style for just one component

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!

Solution

  • You can set an additional className like ant-alert-info-custom 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;
     }
  }
}