javascript - 在 react 组件中使用 styled-jsx
问题描述
我正在尝试在 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; }`
非常感谢!
解决方案
您需要按照这些说明安装 babel 插件。
- 在 babel-loader 之前运行 styled-jsx/webpack
- 将 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>
</>
)
}
推荐阅读
- python - 不能在 python virtualenv 中使用 pip
- vb.net - 如何找出 ExecuteScalar() 是 dbnull
- visual-studio - .net core 的新手,打开了一个 .net core .sln 文件,但所有库(使用)都消失了
- firefox - Firefox启用字体平滑
- apache-spark - Spark 2.3+ 使用 parquet.enable.dictionary?
- c# - 返回行,当唯一键变化发生时
- php - 如果提交的是输入类型文件,则 laravel 中的 required_if 验证不会给出错误
- android - 将字符串转换为链接
- vue.js - 我可以从 vue 自定义指令中获取返回值吗?
- html - 一个图标在另一个前面,与父 div 的右侧对齐