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组件。但是，我在开发工具中看到，在头上添加了一个style元素，但似乎其中包含文本（而不是样式），但其中的语法并未突出显示。结果，未应用样式。

所以我想知道我做错了什么吗？我使用的是“ 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>
)

也很好。

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

1 个答案: