编写样式-不带选择器的jsx

Question

在不使用选择器(button {})指定/包装的情况下，以下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转换style标签内容的方式：

    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的元素。

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