樣式組件在外部 scss 文件中不起作用

Question

當我在某些 antd 元素上使用內聯 styles 時，styles 應用於該元素。 當我將 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>

我使用與樣式中的行完全相同的 styles，但它不適用於該元素。 它不是文件鏈接，因為我在頁面的不同部分使用了 styles 並且它有效。 它也不是 scss 文件中的拼寫錯誤。

Answer 1

該解決方案可以分為 2 個步驟：

1. 通過瀏覽器開發人員工具中的檢查元素找到您希望更改的 Ant 設計組件的名稱 class。

2. 在 SCSS 文件中寫下 class 名稱，並為每個樣式添加!important關鍵字以覆蓋 Ant 設計默認樣式。

注意：通常 Ant 設計元素在檢查時是嵌套的，因此建議在 SCSS 文件中以相同的嵌套順序寫下類。

為什么內聯 styles 有效？

這是因為內聯 styles 比寫在外部樣式表中的 styles 具有更高的優先級。 這就是您能夠輕松覆蓋 UI 庫的 styles 的原因。 但是，不建議在 React 中使用內聯 styles，因為它會嚴重影響代碼的可讀性、可維護性和可讀性，除非你沒有這樣的用例。