Next.js 不使用选择器编写样式化jsx

在不使用选择器（

按钮{}

）指定/包装的情况下，以下

样式化jsx

样式声明将起作用。这个按钮的样式很合适，非常棒。然而，像这样的用法并没有在网站上记录，所以我想知道这种语法是否得到官方的支持和安全使用

<button>
  <style jsx>{`
    background-color: red;

    :hover {
       background-color: #ccc;
    }
  `}
  </style>
Test
</button>

---

styled jsx

在引擎盖下使用

styles

。这就是

styled jsx

如何转换样式标记的内容：

transformedCss=transform(
isGlobal？“”：getPrefix（动态、静态类名称），
插件（css、插件选项），
{splitRules，vendorPrefixes}
)

请注意，

transform

这里有一个围绕

style

的包装函数

因此，

标记中声明的样式将用动态生成的类包装，然后用

样式

转换。 在您的情况下，

样式化jsx

将生成以下css：

如果使用

global

选择器，则不会向生成的代码中添加任何类选择器，因此生成的css不会应用于页面上的任何元素

从我的观点来看，在没有选择器的情况下使用样式不会是一个错误，但是，您应该使用

标记小心地这样做，因为在这种情况下，样式将应用于组件中的每个元素

将此功能与

css.resolve一起使用看起来更安全，因为您可以手动选择要应用css的元素

据我所知，官方文件没有解释如此重要的细节

const { className, styles } = css.resolve`
  font-weight: bold;
`;