Настроить внешний вид формы react-jsonschema-form

Question

У меня есть простое приложение со следующим индексом. js код:

import React, { Component } from "react";
import { render } from "react-dom";

import Form from "react-jsonschema-form";

const schema = {
  "title": "A registration form",
  "description": "A simple form example.",
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name",
      "default": ""
    },
    "telephone": {
      "type": "string",
      "title": "Telephone",
      "minLength": 10
    }
  }
}

const log = type => console.log.bind(console, type);

render(
  <Form
    schema={schema}
    autocomplete="on"
    onChange={log("changed")}
    onSubmit={log("submitted")}
    onError={log("errors")}
  />,
  document.getElementById("root")
);

Пример генерирует форму, но ее внешний вид не бросается в глаза:

I'm comparing this with the forms shown in the live-demo и его внешний вид гораздо привлекательнее:

введите описание изображения здесь

Как это изменить? В демонстрации я не вижу дополнительного CSS кода или шаблона для этого

Answer 1

вам необходимо установить bootstrap, поскольку в документе говорится, что библиотека работает с bootstrap, вы можете выполнить следующие шаги для установки для вашей установки:

1. node install bootstrap --global
2. добавьте import 'bootstrap/dist/css/bootstrap.min.css'; в свое приложение. js

Надеюсь, это сработает.