next.js - 在没有选择器的情况下编写 styled-jsx

Question

无需指定/包装选择器(按钮{})，以下styled-jsx 样式声明将起作用。该按钮的样式正确，非常棒。但是，网站上没有记录这样的用法，所以我想知道这种语法是否得到官方支持并且可以安全使用？

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

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

另一个例子，使用 resolve 标签也可以:

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

Answer 1

styled-jsx使用 stylis css preprocessor在引擎盖下。这是如何styled-jsx转换样式标签的内容:

    transformedCss = transform(
      isGlobal ? '' : getPrefix(dynamic, staticClassName),
      plugins(css, pluginsOptions),
      { splitRules, vendorPrefixes }
    )

请注意，transform这是一个围绕 stylis 的包装函数.

因此在 <style jsx> 中声明了样式标签将用动态生成的类包装，然后用 stylis 转换.在你的情况下 styled-jsx将生成此 css:

如果您使用 global selector 不会将类选择器添加到生成的代码中，因此生成的 css 不会应用于页面上的任何元素。

从我的角度来看，使用没有选择器的样式不会是错误的，但是，您应该小心地使用 <style jsx>。标记，因为在这种情况下，样式将应用于组件内的每个元素。

将此功能与 css.resolve 结合使用看起来更安全，因为您可以手动选择要应用 css 的元素。

据我所知，官方文档缺少对如此重要细节的解释。