在css文件中链接选择器似乎不应用样式。我在组件中导入样式,它只应用于主类,例如:
import styles from './Home.module.css'
const Home = () => {
return (
<header className={styles.header}>
<div className={styles.headerContainer}>
...
而在Home.module.css中我有:
.header {
// some styles that are getting applied
}
.header .headerContainer {
//some styles that don't show up
}
在页面上,我可以看到样式化的header,但看不到headerContainer,所以我理解Next js在将样式项传递给jsx时会自动添加一些变量到类的末尾,但我试图理解如何在css中链接选择器,并能够在Next JS中以这种方式使用样式。
1条答案
按热度按时间isr3a4wc1#
你找到解决办法了吗?
到目前为止,我只是使用
:global
来解决这个问题,我不确定它是如何工作的,但我假设它与!important
有类似的效果。我想做的是:
在使用
:global
的Next.js CSS模块中:可能只是一个短期的解决办法,但我希望这能有所帮助。