样式组件在外部 scss 文件中不起作用

Question

当我在一些 antd 元素上使用内联样式时，这些样式会应用到元素上。当我将className应用于同一个Item时，样式不适用我不知道为什么。

<Item
    colon={false}
    label={label}
    labelAlign="right"
    labelCol={{ span: 6, offset: 6 }}
    // className={styles.action}
    style={{ margin: 0, padding: 0, textAlign: 'left' }}
>
   {val}
</Item>

我使用与样式中的线条完全相同的样式，但它不适用于元素。它不是文件链接，因为我在页面的不同部分使用样式并且它可以工作。它也不是 scss 文件中的拼写错误。

Answer 1

解决方案可以分为两步：

1. 通过浏览器开发者工具中的inspect元素找到您希望更改的Ant Design组件的类名。

2. 在 SCSS 文件中记下类名，并使用 !important 关键字添加每个样式以覆盖 Ant Design 的默认样式。

注意： 通常 Ant Design 元素在检查时是嵌套的，因此建议在 SCSS 文件中以相同的嵌套顺序写下类。

为什么内联样式有效？

这是因为内联样式的优先级高于外部样式表中编写的样式。这就是您能够轻松覆盖 UI 库样式的原因。但是，不建议在 React 中使用内联样式，因为它会严重影响代码的可读性、可维护性和可读性，除非您没有这样的用例。