javascript - 在 react 组件中使用 styled-jsx

Question

我正在尝试在 react 组件（使用 create react app 创建）中使用 styled-jsx 库。

但我得到了错误：

styled-jsx/css：如果您收到此错误，则表示您的css标记模板文字没有被转译。

我不确定如何解决它，或者无法使用这个用于反应组件的库（这是我第一次使用它）。

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; }`

非常感谢！

Answer 1

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

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

该错误并不表明您的标记存在问题，更多的是代码是如何被转译的，但您可以通过简化它来进行测试：

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