Create column form layout using react-jsonschema-form and marble-seed

columns-template.js

import React, { Component } from 'react'
import api from '~base/api'
import classNames from 'classnames'

import {
  BaseForm,
  TextWidget,
  EmailWidget,
  NumberWidget
} from '~base/components/base-form'

function columnsObjectFieldTemplate ({ properties, description }) {
  return (
    <div>
      <div className='columns is-multiline has-form-columns'>
        {properties.map(prop => {
          const uiSchema = prop.content.props.uiSchema
          const className = classNames('column', uiSchema['ui:column'] || 'is-12')
          return <div key={prop.content.key} className={className}>
            {prop.content}
          </div>
        })}
      </div>
      {description}
    </div>
  )
}

class ColumnForm extends Component {
  render () {
    const schema = {
      type: 'object',
      title: '',
      required: [
        'name'
      ],
      properties: {
        name: {type: 'string', title: 'Nombre'},
        phone: {type: 'string', title: 'Teléfono'},
        email: {type: 'string', title: 'Correo'}
      }
    }

    const uiSchema = {
      name: {'ui:widget': TextWidget, 'ui:column': 'is-6'},
      email: {'ui:widget': EmailWidget, 'ui:column': 'is-6'},
      phone: {'ui:widget': NumberWidget, 'ui:column': 'is-12'}
    }

    return (
      <BaseForm
        schema={schema}
        uiSchema={uiSchema}
        formData={{}}
        ObjectFieldTemplate={columnsObjectFieldTemplate}
      />
    )
  }
}

export default ColumnForm

const uiSchema = {
  organization: {'ui:widget': SelectWidget, 'ui:column': 'is-6'},
  project: { 'ui:widget': SelectWidget, 'ui:column': 'is-6' },
  name: {'ui:widget': TextWidget, 'ui:column': 'is-6'},
  email: {'ui:widget': EmailWidget, 'ui:column': 'is-6'},
  phone: {'ui:widget': NumberWidget, 'ui:column': 'is-6'},
  dateBirth: {'ui:widget': DateWidget, 'ui:column': 'is-6'},
  location: {'ui:widget': SelectWidget},
  priority: {'ui:widget': SelectWidget, 'ui:column': 'is-4'},
  source: {'ui:widget': TextWidget, 'ui:column': 'is-4'},
  status: {'ui:widget': SelectWidget, 'ui:column': 'is-4'}
}

The schema above will shows:

I am trying to make this work on my own react-jsonschema-form playground but the rendering never changes even though the field template is used and the fields seemingly have the right class names. I was not able able to figure out what your "base-form" really entailed, versus the standard "Form" from react-jsonschema-form, and I fear there is some additional magic. If you could get this going on a jsfiddle or codepen it would really help.

Can you update you solution? on a jsfiddle or codepen with the last version of react-jsonschema-form, with MUI