How to override antd style variables when using scss?

Question

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.

Answer 1

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.

Answer 2

In your scss file, add this class 'ant-tooltip' and then type this variable --antd-arrow-background-color and give the color value whatever you want.

.ant-tooltip {
  --antd-arrow-background-color: red;
}

Variable color change

Proof