Create Material UI TextField variants
The power of Material ui to build a component system to match a design system on top of Material ui components is AWESOME!
Thanks to the createTheme api you can customize most of the components to match your design without creating the components itself, this can be achieved by creating variants.
A variant is a a specific style for a specific state for a specific component… for example the base variants for the TextField: “Outlined”, “Filled” and “Standard”
The problem comes when you realize there are SOME components that allows you to add variants to, like for example Button, Typography, Avatar, etc… but not TextField! which is a core component in any application.
A workaround
Since Material ui doesn’t allows you to add TextField variants inside the createTheme , we can always use some other css selector and then make the corresponding changes once we have that…
In the example above I want to make a TextField variant so which there is no border unless the user hovers or activates the input.
I’m using .subvariant-hoveredclass to select the correct html node and then styling the fieldset how I want it to be styled, and here is how it is used:
You can use any naming convention for your classes, I’m using “subvariant-variantName” so I know it is using the styles defined on the createTheme function.
And this is the final result👇 (hover the “Pseudo-variant” element to see it in action)
That’s it! you can now create variants for your Inputs! Cheers! 🙌
