如何在react js中添加动态CSS

我们可以在 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 }) 
}

My Form:

<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>
 );
)

In React您可以通过传递对象来传递动态样式，如下所述：React.js 内联样式最佳实践 https://stackoverflow.com/questions/26882177/react-js-inline-style-best-practices

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

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

但需要注意的是，CSS 属性将位于camelCase, e.g. borderBottom: '10px'