主页 / coding / 问题 / 78127237
Accepted
vampireAb
Asked: 2024-03-08 19:03:42 +0800 CST

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

  • 772

我在我的 React 项目中使用 antd 组件。我想覆盖scss. 我找到了 css 的答案，但同样的事情不适用于 scss。

我想覆盖antd-tooltip-arrow组件的背景颜色。

sass

2 个回答

  1. Best Answer

    要使用 SCSS 覆盖 antd-tooltip-arrow 组件的背景颜色，您可以利用--antd-arrow-background-colorCSS 变量。以下是实现这一目标的方法：

    // 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-colorCSS 变量的内联样式的元素。
    • 通过将--antd-arrow-background-color变量设置为所需的颜色，您可以覆盖工具提示箭头的默认背景颜色。
    • 1

  2. 在您的 scss 文件中，添加此类“ant-tooltip”，然后键入此变量 --antd-arrow-background-color 并给出您想要的颜色值。

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

    可变颜色变化

    证明

    • 0

相关问题