最近,我在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类之前自动应用样式。
非常感谢。
1条答案
按热度按时间4sup72z81#
因此,在使用Next一段时间后,实际上应用依赖样式的唯一方法是使用返回的JSX样式。
下面是一个对我有效的例子:
这将使您编写的CSS直接与元素一起发布,因此无需担心依赖样式。