next.js和sass以及使用:全球问题

Question

我正在使用next.js，并且使用"全球"；。

正在获取此错误：语法错误：Selector"：global.Select control"；不是纯的(纯选择器必须至少包含一个本地类或id(

.dropdownColor {
:global {
.Select-button {
border-color: $red-hue-4;
}
}
}

和

:global {
.Select-control {
border-radius: 2px;
border-color: $navy;
}
.Select-clear, .Select-arrow {
display: none;
}
}

我必须把这个放在我的全局scs文件中吗？格式变了吗？

Answer 1

如果您使用的是css模块，则这将改变元素的边框颜色，其中.Select-button的全局类嵌套在dropdownColor模块中：

.dropdownColor {
:global(.Select-button) {
border-color: $red-hue-4;
}
}

正如错误所指出的，:global必须嵌套在本地(模块(类或id中。因此，尽管上面的方法有效，但您的第二个示例不起作用，因为您将:global作为顶级项。或者像我上面所做的那样将它嵌套在本地id或类中，或者将它提取到全局样式表中。