jsonforms icon indicating copy to clipboard operation
jsonforms copied to clipboard

Customize Material-UI input components with props

Open tasoskakour opened this issue 4 years ago • 1 comments

Is your feature request related to a problem? Please describe. I'd like to show a text input with variant: 'outlined'. Would this be possible to change with options/props passed to the Control of uischema?

Describe the solution you'd like Would something like this be possible?

  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/trackingId",
      options: {
        variant: "outlined"
      }
    },
    {
      type: "Control",
      scope: "#/properties/extraGaVarsTrack"
    }
  ]
}

Describe alternatives you've considered I'm guessing an alternative would be to create custom MUI renderers from scratch as you demonstrate to the DOCS. But wouldn't that be a little overkill, if we just want to change a simple prop to a MUI input?

Describe for which setup you like to have the improvement Framework: [react] RendererSet: [material]

tasoskakour avatar Mar 05 '21 06:03 tasoskakour

Hi @tasoskakour, this definitely makes sense in general. I would structure it this way:

options: {
  muiInputProps: {
    // props to set
  }
}

and hand these over in the renderer. This is not too difficult but needs to be implemented for all renderers. At the moment you need to handle this via custom renderers.

Note that if you want to set some general options you can usually handle this via Material UI Theme customization.

sdirix avatar Mar 11 '21 09:03 sdirix