React項目中如何使用CSS Modules全局覆蓋Ant Design組件樣式？

本文探討如何在React項目中，利用css Modules全局覆蓋Ant Design組件樣式（例如Tabs組件），并解決:global(…)語法錯誤。

問題：

開發者嘗試使用CSS Modules覆蓋Ant Design的Tabs組件樣式，例如將Tab標簽背景色修改為紅色。代碼如下：

// antdcustomstyle/index.module.css (錯誤代碼) :global(   .ant-tabs-tab {     background-color: red;   } )

編譯時報錯：syntax Error: … unknown word

立即學習“前端免費學習筆記（深入）”；

原因及解決方案：

錯誤在于:global語法的誤用。 正確的語法是將選擇器放在:global()內，樣式定義在{}中。

正確代碼：

// antdcustomstyle/index.module.css (正確代碼) :global(.ant-tabs-tab) {   background-color: red; }

修改后的代碼能夠正確覆蓋Ant Design默認樣式。 需要注意的是，.myclass { :global(.ant-tabs-tab) { … } }這種寫法是錯誤的，因為這試圖在CSS Modules局部作用域內定義全局選擇器，違背了:global的設計初衷。 :global關鍵字旨在突破CSS Modules的作用域限制，直接作用于全局樣式。

通過以上修正，即可成功使用CSS Modules全局覆蓋Ant Design組件樣式，避免:global語法錯誤。