时间戳

首页 > 解决方案 > 样式组件在外部 scss 文件中不起作用

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

问题描述

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

<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 文件中的拼写错误。

标签： cssreactjsantd

解决方案

解决方案可以分为两个步骤：

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

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

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

为什么内联样式有效？

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

推荐阅读