如何在React JS中添加动态CSS？能否通过style={style}实现？

当然可以用style={style}语法实现动态设置CSS样式，但你的代码目前有几个关键细节需要调整——因为React的style属性要求传入JavaScript对象，而不是字符串，这是核心问题。我来一步步帮你修正：

核心原理说明 #

React的style prop接受的是键值对对象，注意两个关键点：

• CSS属性名要用驼峰命名（比如原生CSS里的font-size要写成fontSize）
• 属性值如果是字符串类型（比如颜色值、带单位的尺寸）需要加引号，纯数值类的尺寸可以直接写数字

你的代码问题分析 #

现在你在输入框里输入的是类似{ "color": "blue", "font-size": "22px"}的字符串，但直接把这个字符串赋值给style是无效的，需要先把它转换成合法的React样式对象，还要处理短横线属性名到驼峰的转换。

修改后的完整代码示例 #

1. 构造函数与状态处理

constructor(props) {
  super(props);
  this.state = {
    title: this.props.title || '',
    styleTitle: this.props.style_title || { color: 'blue' } // 初始值用对象而非字符串
  };
  this.change = this.change.bind(this);
}

// 处理输入转换：把字符串转成对象，同时转换属性名为驼峰
change(e) {
  const { name, value } = e.target;
  if (name === 'styleTitle') {
    try {
      // 先把输入的JSON字符串转成原始对象
      let rawStyleObj = JSON.parse(value);
      // 把短横线命名的属性转成驼峰命名
      const camelCaseStyle = {};
      Object.keys(rawStyleObj).forEach(key => {
        const camelCaseKey = key.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
        camelCaseStyle[camelCaseKey] = rawStyleObj[key];
      });
      this.setState({ styleTitle: camelCaseStyle });
    } catch (err) {
      // 处理用户输入不合法JSON的情况，避免页面崩溃
      console.error('样式格式输入错误，请检查JSON语法:', err);
    }
  } else {
    this.setState({ [name]: value });
  }
}

2. 表单输入部分

<input 
  type="text" 
  name="title" 
  value={this.state.title} 
  onChange={this.change} 
  placeholder="输入标题内容"
/>
<input 
  type="text" 
  name="styleTitle" 
  // 把状态里的样式对象转成字符串显示在输入框
  value={JSON.stringify(this.state.styleTitle)} 
  onChange={this.change} 
  placeholder='例如: {"color": "red", "font-size": "24px"}'
/>

3. 预览渲染部分

render() {
  return (
    <p style={this.state.styleTitle}>{this.state.title}</p>
  );
}

额外提示 #

• 一定要处理JSON解析的异常，避免用户输入错误格式导致页面报错
• 如果样式是从父组件props传递过来的，要确保父组件传递的是对象类型，而非字符串
• （附界面示意图：左侧为包含标题输入框和样式输入框的表单区域，右侧为实时展示标题样式的预览区域）

内容的提问来源于stack exchange，提问作者user264675