在没有选择器的情况下编写 styled-jsx答案

【问题标题】：Writing styled-jsx without selector在没有选择器的情况下编写 styled-jsx
【发布时间】：2019-05-07 14:22:41
【问题描述】：

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

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

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

另一个例子，使用同样有效的解析标签：

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

【问题讨论】：

标签： next.js

【解决方案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 选择器，则不会将类选择器添加到生成的代码中，因此生成的 css 不会应用于页面上的任何元素。

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

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

据我所知，官方文档漏掉了这么重要的细节的解释。

【讨论】：