在react组件中使用styled-jsx

问题描述

我正在尝试在react组件（通过create react应用程序创建）中使用styled-jsx库。

但是我得到了错误：

styled-jsx / css：如果出现此错误，则表示未转译您的css标记的模板文字。

我不确定如何解决它，或者是无法使用此React组件库（这是我第一次使用它）。

import React from 'react';
import css from 'styled-jsx/css'
// import './styles';

export default function MyComponent(props) {
    return (
        <>
            <div key={props.value}>{props.label}</div>
            <style jsx>{button}</style>
        </>
    )
}

const button = css`div { color: hotpink; }`

非常感谢您！

解决方法

您需要按照这些instructions安装babel插件。

1. 在babel-loader之前运行styled-jsx / webpack
2. 将styled-jsx / babel添加到babel loader插件中

该错误并不表示您的标记有问题，更多地是如何编译代码，但是您可以通过简化代码进行测试：

import React from 'react';
import css from 'styled-jsx/css'

export default function MyComponent(props) {
    return (
        <>
            <div key={props.value}>{props.label}</div>
            <button>Click Me</button>

            <style jsx>{`
              button {
                color: hotpink;
              }
`            `}</style>
        </>
    )
}