升级react-jsonschema-form至bs4后样式异常，需做哪些调整？

你遇到的情况很常见——升级这类表单库不只是换个依赖包那么简单，因为react-jsonschema-form-bs4是专门为Bootstrap 4适配的版本，和原react-jsonschema-form（通常默认适配Bootstrap 3）在样式依赖、组件结构上都有差异。下面分点帮你理清需要做的调整：

1. 必须正确引入Bootstrap 4样式 #

你代码里注释掉了Bootstrap的CSS导入，这是首先要修复的：

import 'bootstrap/dist/css/bootstrap.min.css'; // 取消注释，确保引入Bootstrap 4的样式

原库可能依赖Bootstrap 3的样式类，而react-jsonschema-form-bs4会生成Bootstrap 4的DOM结构和类名，没有正确引入Bootstrap 4的CSS，按钮、表单控件的基础样式都会错乱。

2. 图标缺失的核心原因：Bootstrap 4移除了内置图标 #

原react-jsonschema-form默认用的是Bootstrap 3的Glyphicons，但Bootstrap 4已经彻底移除了这套图标系统，转而推荐使用第三方图标库（比如Font Awesome）。要恢复按钮图标，你需要：

• 安装Font Awesome：

  npm install @fortawesome/fontawesome-free
  

• 在代码中导入图标样式：

  import '@fortawesome/fontawesome-free/css/all.min.css';
  

react-jsonschema-form-bs4会自动适配Font Awesome的图标类，导入后按钮的图标就能正常显示了。

3. 检查UISchema和自定义配置的兼容性 #

大部分基础的Schema和UISchema语法（比如你用的ui:enumDisabled）是兼容的，但如果你的项目有复杂的自定义控件、自定义样式类，需要注意：

• Bootstrap 4的布局类（比如栅格系统、间距类）和Bootstrap 3不同，如果你之前有自定义的表单布局样式，可能需要调整类名。
• react-jsonschema-form-bs4可能新增了一些Bootstrap 4专属的UI配置项，比如针对表单组的ui:className可以用Bootstrap 4的类来调整样式。

修改后的完整测试代码示例 #

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Form from "react-jsonschema-form-bs4";
import 'bootstrap/dist/css/bootstrap.min.css'; // 引入Bootstrap 4样式
import '@fortawesome/fontawesome-free/css/all.min.css'; // 引入Font Awesome图标

const schema= {
  "definitions": {
    "Color": {
      "title": "Color",
      "type": "string",
      "anyOf": [
        { "type": "string", "enum": [ "#ff0000" ], "title": "Red" },
        { "type": "string", "enum": [ "#00ff00" ], "title": "Green" },
        { "type": "string", "enum": [ "#0000ff" ], "title": "Blue" }
      ]
    }
  },
  "title": "Image editor",
  "type": "object",
  "required": [ "currentColor", "colorMask", "blendMode" ],
  "properties": {
    "currentColor": { "$ref": "#/definitions/Color", "title": "Brush color" },
    "colorMask": {
      "type": "array",
      "uniqueItems": true,
      "items": { "$ref": "#/definitions/Color" },
      "title": "Color mask"
    },
    "colorPalette": {
      "type": "array",
      "title": "Color palette",
      "items": { "$ref": "#/definitions/Color" }
    },
    "blendMode": {
      "title": "Blend mode",
      "type": "string",
      "enum": [ "screen", "multiply", "overlay" ],
      "enumNames": [ "Screen", "Multiply", "Overlay" ]
    }
  }
},
UISchema={
  "blendMode": { "ui:enumDisabled": [ "multiply" ] }
},
formData= {
  "currentColor": "#ff0000",
  "colorMask": [ "#00ff00" ],
  "colorPalette": [ "#ff0000", "#ff0000", "#0000ff" ],
  "blendMode": "screen"
}

class App extends Component {
  render() {
    return(
      <div style={{width: '90%', margin: '20px'}}>
        <Form UISchema={UISchema} schema={schema} formData={formData} onSubmit={console.log({formData})} />
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.unregister();

总结 #

你需要做的不只是更换Bootstrap版本，还要：

• 确保引入Bootstrap 4的CSS和兼容的图标库
• 检查并适配自定义样式到Bootstrap 4的类名
• 复杂场景下可能需要微调UISchema的配置

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