如何解决在react组件中使用styled-jsx
我正在尝试在react组件(通过create react应用程序创建)中使用styled-jsx库。
但是我得到了错误:
我不确定如何解决它,或者是无法使用此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插件。
- 在babel-loader之前运行styled-jsx / webpack
- 将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>
</>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。