reactjs - 如何在react js中添加动态CSS

Question

我们可以在 React js style={style} 中实现这一点吗？

constructor(props) {
   super(props);
   this.state = {
     style_title: {"color": "blue"}
   };
 this.change = this.change.bind(this);
}

change(e) { 
 this.setState({ 
   [e.target.name]: e.target.value }) 
}

我的表单:

<input type="text" name="title" value={this.props.title} onChange={e =>this.changeEdit(e)} /> 
<input type="text" name="style_title" value={this.props.style_title} onChange={e =>this.changeEdit(e)} />  

在预览模式下打印标题文本，为此我需要使用输入字段动态设置标题样式:

{ "color": "blue", "font-size": "22px",} 

以上样式应应用渲染 <p style={style}>{this.props.title }</p>在样式属性中

预览部分:

render = () => (
 const style = this.props.style_title; 

 return (
     <p style={style}>{this.props.title }</p>
 );
)

Answer 1

在 React 中，您可以通过传递对象来传递动态样式，如下所述: React.js inline style best practices

或者您也可以内联传递，例如:

<div style={{ height: '10%' }}>
  Hello World!
</div>

但需要注意的是，CSS 属性将采用 camelCase 格式，例如borderBottom:'10px'