react-jsonschema-form
react-jsonschema-form copied to clipboard
Remove “form-group field field-object” classnames from SchemaField
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>
);
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.
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)
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
Move to from the template into the field