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.