使用scss时如何覆盖antd样式变量？

Question

我在我的 React 项目中使用 antd 组件。我想覆盖

scss

中特定组件的样式。我找到了 css 的答案，但同样的事情不适用于 scss。

我想覆盖

antd-tooltip-arrow

组件的背景颜色。

Answer 1

要使用 SCSS 覆盖 antd-tooltip-arrow 组件的背景颜色，您可以使用

--antd-arrow-background-color

CSS 变量。以下是实现这一目标的方法：

// 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
}

• .ant-tooltip-arrow-content 类针对 antd 的内容 工具提示箭头。

• [style*='--antd-arrow-background-color']

  选择器用于 选择具有包含

  --antd-arrow-background-color

  CSS 变量的内联样式的元素。
• 通过将

  --antd-arrow-background-color

  变量设置为您想要的 颜色，您覆盖默认背景 工具提示箭头的颜色。