react-jsonschema-form icon indicating copy to clipboard operation
react-jsonschema-form copied to clipboard

Remove “form-group field field-object” classnames from SchemaField

Open NeslihanKolukisa opened this issue 3 years ago • 4 comments

Below is the custom template code I have given to the json schema form. For objects in the form schema, it automatically creates a divi with the form-group field field-object class and MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 class. I don't want these to happen. I want all items to be lined up side by side (MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6). How can I do it.

const CustomTemplate = (oftProps: ObjectFieldTemplateProps):any => (
  <div>
    <Grid container spacing={getSpacing(3)}>
      {oftProps.properties.map((element) => {
        if ((element.content.props.schema.type === undefined && element.content.props.schema.$ref === undefined)
            || (element.content.props.schema.type !== undefined && element.content.props.schema.type !== 'object')
          || enumFieldControl(element)) {
          return <Grid item xs={getColumns(2)}><Paper>{element.content}</Paper></Grid>;
        }
        return <Hidden>{element.content}</Hidden>;
      })}
    </Grid>
  </div>
);

NeslihanKolukisa avatar Mar 17 '21 08:03 NeslihanKolukisa

This issue has been automatically marked as possibly close because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

stale[bot] avatar May 26 '23 10:05 stale[bot]

I'm running into this. It's causing problems in an app that uses both MUI and Bootstrap where I want to use the MUI theme and use no bootstrap styles--this causes issues because form-group is a bootstrap class. Right now, the only way to remove these classes is to override the SchemaField, so instead I'm overriding the bootstrap styles with CSS.

In a future major version, we could consider only adding class names in templates (i.e. hard-coded class names should not be added at the field level)

nickgros avatar Jun 01 '23 20:06 nickgros

One could wrap the existing component(s) and programmatically remove the classnames, but ideally I would like for us to remove classnames from fields in v6

nickgros avatar Jun 23 '23 13:06 nickgros

Move to from the template into the field

heath-freenome avatar Nov 17 '23 20:11 heath-freenome