[英]Styled-JSX variables not working
I have installed styled-jsx using styled-jsx@2.2.6
and am doing something like so: 我已经使用
styled-jsx@2.2.6
安装了styled-jsx,并且正在执行以下操作:
import React, { Component } from 'react'
export default Index class extends Component {
constructor(props){
super(props)
this.state = { clicked: false}
}
render(){
return(){
<div>
<button onClick={() => this.setState({clicked: !this.state.clicked}}}>Hello</button>
<style jsx>{`
button {
background-color: ${this.state.clicked ? 'red' : 'blue'}
}
`}<style>
}
}
}
No styles what so ever are being applied and I console logged out the clicked state and it is being changed. 没有样式被应用,因此我从控制台注销了单击状态并进行了更改。
Here's working example. 这是工作示例。 You had lot of typo's in there.
你那里有很多错字。 I assume you are not using appropriate IDE that usually points out at all those issues.
我假设您没有使用通常指出所有这些问题的适当IDE。
Here's the working code: https://stackblitz.com/edit/react-3ttfch 这是工作代码: https : //stackblitz.com/edit/react-3ttfch
Here's your fixed typoless code: 这是您的固定无错代码:
class Index extends Component {
constructor(props) {
super(props)
this.state = { clicked: false }
}
render() {
return (
<div>
<button onClick={() => this.setState({ clicked: !this.state.clicked })}>
Hello
</button>
<style jsx>{`
button {
background-color: ${this.state.clicked ? 'red' : 'blue'}
}
`}</style>
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.