reactjs - 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>
    )
}

如您所见，我想将 a 传递className给外部 Card 组件。但是，我在开发工具中看到，头部添加了一个样式元素，但似乎它里面有文本，而不是样式，也就是说，里面的语法没有突出显示。结果，未应用样式。

所以我想知道我做错了什么？我使用了文档中所说的解析标签。

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

我使用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>
)

效果也很好。