Sometimes, rather than doing all your styling from scratch, you want to set up some quick and easy styling, that still looks good, to get your site started. React has many robust frameworks to suit this purpose. But what happens if you want to make tweaks to their styling components? Change colors, images, fonts, etc. This can be exceedingly frustrating, especially if you’re shooting in the dark. The documentation for how to access these parameters is all there, but it can be a bit hard to decipher and utilize yourself at first glance. This post will aim to help you along with figuring out the syntax you need, and where to find it. I will be using Material-UI for the examples.
Once you’ve gone through all the setup, got your components all placed and rendered, how do you change them? We’ll be playing around with the TextField component from Material-UI.
The first thing you’ll see if a few default styling options: standard, filled, and outlined. These names will be important. If you scroll down in the documentation, the you can see a few examples of styling the components.
This shows good examples of things you can change about the component, but the code in the example can be hard to decipher what targets which component or parameter and how. Too see what all those ‘& .Mui….’ lines are, next we’ll head to the TextField API page in the Component API documentation to see the props and css that a TextField component has.
From that page, we learn that TextField is an abstraction on more basic components, so we’ll follow the links to the OutlinedInput API. Scroll down, and we’ll find the various targeting names for aspects of an OutlinedInput.
Using these class name within your useStyles function (instructions for how to set THAT up can be found here) and applying the relevant class to your TextInput (or even if it’s applied to a higher order component, with the correct naming) will apply your styles. For example, the default outlined input looks like this:
If you apply the code from the example in the documentation:
You can get the component to have that red when ignored, yellow when hovered, green when filled/focused styling from the example. Or if you did it like this:
You could make the border, label, and the input text white all around, like so:
Customizing the CSS of frameworks or library using is all about knowing how and where to search for the right terms you need to target their predefined attributes. But once you do, it’s pretty straightforward!
