最近，我在Next.js中為我的header對象創建了一個CSS組件。

盡管在這個例子中，我將使用Next.js文檔中的一個更簡單的例子。

想象這是我的button.js:

import styles from './Button.module.css'

export function Button() {
return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
    Destroy
    </button>
  )
}

這是我的。/button.module.css

.error {
    color: white;
    background-color: red;
}

.error.glow {
    box-shadow: 0 0 16px red;
}

在頁面的后面，我將修改DOM以將類“glow”應用于錯誤按鈕對象(因此它應該匹配. error.glow)。盡管在這種情況下發生了什么，但是類得到了應用，而CSS沒有。

我試圖在Stackoverflow，youtube和官方文檔中尋找一個關于導入依賴CSS的答案，請建議我可以解決這個問題的任何方法或是否可行。

我還嘗試了通過添加styles.glow在組件中手動導入樣式，但這將自動應用樣式，甚至在我將。發光類。

非常感謝。

所以在使用Next一段時間后，實際上應用依賴樣式的唯一方法是通過使用返回的JSX樣式。

下面是一個對我有用的例子:

這將直接將您編寫的CSS與元素一起發布，因此無需擔心依賴樣式。