styled-jsx -可以在没有类名的情况下定义css规则吗?为什么动态解析的样式不起作用？

Question

我有以下代码：

import React from 'react';
import MainTemplate from '../components/MainTemplate';
import { H1, Card } from '@blueprintjs/core';
import css from 'styled-jsx/css';

export default () => {
    const { className, styles } = css.resolve`
     { color: red; }
    `;
    return (
        <MainTemplate>
            {styles}
            <Card className={className}>
                <H1>Some header text!</H1>
            </Card>
        </MainTemplate>
    )
}

如您所见，我希望将一个className传递给外部Card组件。然而，我在dev工具中看到，有一个style元素添加到了head中，但它看起来好像里面有文本，而不是样式，也就是说，里面的语法没有突出显示。在结果中，样式不被应用。

所以我想知道我做错了什么？我使用了一个resolve标签，因为它是in the documentation。

我还想知道，是否可以定义元素的样式，而不指定具体的标记名或类名？

我使用的是next.js，在开发和生产模式下都不会应用样式。

Answer 1

事实证明，我只是在测试中使用了一个不合适的css规则-- color被H1的样式覆盖了，所以我没有看到效果。如果我使用width或height，它工作得很好。所以这只是我的错误。

至于第二个问题，它在没有具体的标签或类的情况下工作得很好。甚至不需要添加括号，也就是说，下面的代码

const { className, styles } = css.resolve`height: 100%;`;
return (
    <MainTemplate>
        {styles}
        <Card className={className}>
            <H1>Плееры</H1>
        </Card>
    </MainTemplate>
)

效果也很好。