如何在Next.js中对CSS组件应用依赖样式?

6qftjkof  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(167)

最近,我在Next.js中为我的头对象创建了一个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在组件中手动导入样式,但这会在我分配.glow类之前自动应用样式。
非常感谢。

4sup72z8

4sup72z81#

因此,在使用Next一段时间后,实际上应用依赖样式的唯一方法是使用返回的JSX样式。
下面是一个对我有效的例子:

这将使您编写的CSS直接与元素一起发布,因此无需担心依赖样式。

相关问题