This week concludes the second week of my internship at 9cv9 as part of the NUS Overseas College (NOC) Southeast Asia programme.
Over the past 2 weeks, one very useful library used in the development of UrbanCV is Material-UI.
A quick introduction of what Material-UI is that it is a library of pre-made React components for faster and easier web development.
The various components range from simple buttons to more complex components, such as, and are all elegantly designed, following Google’s Material design (hence its name), and can be customised accordingly to suit a user’s needs.
Material-UI is also regularly maintained and perhaps most importantly, is very well documented, making it easy for even a new developer like me to pick it up quickly and be able to properly use their components.
There are many interesting aspects of the Material-UI library to cover that I learned about, but today I will focus more on the styling aspect.
For components, there are many different ways to style it, and I would like to go through 5 ways to do it that I have learned either through Material-UI’s official documentation or from the internship.
The first way is through customizing Material-UI’s theme, which is the easiest way to make consistent changes for all Material-UI’s components.
This is done by creating the theme object with createMuiTheme and modifying the relevant properties, before passing it into the ThemeProvider component, added at the top level of your app.
In the example below, we have customised the palette of the theme, such that components with the prop of color=”primary” will be purple instead of the default blue.
const theme = createMuiTheme({
palette: {
primary: {
main: ‘#9932CC’, // purple
},
},
});
The second way is to use Material-UI’s CSS-in-JS solution, which involves using one of the following 3 APIs: (Click on the links to view examples of how they are used)
- makeStyles – Link a stylesheet with a function component using the hook pattern
- The hook can then be used in a function component.
- styled – Link a stylesheet with a function component using the styled components pattern
- Create a new component by wrapping the desired component with the desired style
- withStyles – Link a stylesheet with a component using the higher-order component pattern
- Create a wrapped component that accepts a classes prop and simply merges the class names provided with the style sheet.
The third way is through plain CSS, where CSS is written in a .css file and imported in the relevant files to be used. The components then have access to the styling by giving it the same className as the relevant CSS classes.
The fourth way is through a component’s props. Material UI has attempted to implement all of the various Material Design variations for us and they can be used by passing in certain props to components.
For example, if you wish to have outlined buttons, simply pass in the string “outlined” to the variant prop as seen below.
Each component accepts many different props that can be used to easily customise it, so check out Material-UI’s documentation to see what props the components have and how they can be customised.
<Button variant=”outlined”>Click Me!</Button>
Finally, the last way is through quick and easy inline-styles, as every component has a style property.
One useful thing to note is that with inline-styles, you don’t have to worry about CSS specificity as the inline-style takes precedence over the regular CSS.
However, on React’s official documentation, this method is discouraged as inline-styles typically have a worse performance compared to the methods above. An example of such a usage is:
<Button style={style}>Click Me!</Button>
