Search code examples
sassoverridingantd

How to override antd style variables when using scss?

I am using antd components in my react project. I want to override the specific component's styling in scss. I found answers for css but the same thing doesn't work with scss.

I want to override antd-tooltip-arrow component's background color.

Solution

  • To override the background color of the antd-tooltip-arrow component using SCSS, you can utilize the --antd-arrow-background-color CSS variable. Here's how you can achieve this:

    // Your SCSS file

.ant-tooltip-arrow-content[style*='--antd-arrow-background-color'] {
 --antd-arrow-background-color: #ffffff !important; 

 // Set your desired background color here and use important if necessary
}
    • The .ant-tooltip-arrow-content class targets the content of the antd tooltip arrow.
    • The [style*='--antd-arrow-background-color'] selector is used to select elements that have inline styles containing the --antd-arrow-background-color CSS variable.
    • By setting the --antd-arrow-background-color variable to your desired color, you override the default background color of the tooltip arrow.