Is it possible to pass the variant prop to inputs currently?

[timayy]

Material UI text fields have a variant prop that changes the way look - i.e. filled, outlined, standard.

Is it possible to pass this to inputs via the uiSchema? If not, is it possible to wrap the schema generated components in a ThemeProvider that just assigned a prop like variant?

Thanks!

[vip-git]

Hi @timayy ,

Yes you can pass any prop mentioned to change the text fields.

There are 2 options:

1. Use mui:variant attribute in uiSchema
   Example can be seen here for multiline .

you can prefix mui: followed by the prop name and value to use them in your uiSchema

2. You can make use of Theme and change the props directly for all inputs
   Example can be seen here

You can also read more about overriding attributes using theme from Material UI Docs.

My recommendation would be to go 2nd way to be consistent and use theme overrides.

I hope this answers your question @timayy. Thanks for raising it.

You can also read more in this issue #361 where uiSchema was used but in your case theme override would be better option.

[timayy]

Thanks for the thorough answer, @vip-git. I appreciate it.

I know this isn't the place to ask, but before I make an issue, I thought I'd quick ask you -

I can't for the life of me get this package to work; both the latest main or next package. I've matched all the dependencies in a create react app project I have up, and whenever I import this package (import MaterialJsonSchemaForm from "react-jsonschema-form-material-ui";), my browser will hang, and eventually get the error:

TypeError: Cannot read property 'call' of undefined
__webpack_require__
../my_app/frontend/create-react-app/node_modules/react-jsonschema-form-material-ui/dist/bundle.js:2

This code is identical to your Basic Example Usage. But this error happens from just simply importing the package anywhere.

Identical error if using [email protected] or [email protected].

Only think I can think of is react create app uses an older webpack version compared to what you have in your devDependencies.
Can you think of any reason why this happens?

[vip-git]

Thanks @timayy - I think there is soon going to be native support for webpack 5 in CRA so that might resolve the issue as well.

I will try to get some boilerplate ready as well in any case so you have a reference .

[timayy]

Hey @vip-git, seen you've been super busy lately, awesome work!

How did you go with the web-pack dependencies?

[vip-git]

Hi @timayy - i am currently finalising 3.0.0 release part of that release i am creating the boilerplate for CRA. Expect that to be there by next week 23rd May - I will let you know if its done earlier. But when 3.0.0 finalised it will cover all aspects.

[vip-git]

Hi @timayy - Sorry for the delay in coming back with the boilerplate code.

I have created a repo now with boilerplate code and deployed output url

I have released a new version 3.0.0-alpha.11 which now bundles using rollup to avoid webpack 5 conflicts with CRA.

i hope this helps in resolving your issue. Thanks for checking out react-jsonschema-form-material-ui.

If you find similar issues please let me know.

Thanks - V

[timayy]

Hey @vip-git,

I apologize about the delay in response! Been a crazy few weeks!

Really, really appreciate you doing this! I had my own RJSF wrapper for MUI, but your components work much better - especially the multi-step stuff. Sorry if it was a hassle getting around the webpack 5 dependency, I know wrestling module bundlers can be painful.

I'll test out the boilerplate app, and if all is well I'll report back here, and begin replacing my RJSF system with react-jsonschema-form-material-ui.

Big thanks again, Vip - appreciate your efforts!