Styling with Material UI

This blog documents my first attempt at styling a front end, taking our website from the version on the right, to the version on the left. The styling was done using Material UI, a React UI framework, which is available at https://material-ui.com/

Initial setup

• Install and automatically update your package.json dependencies by running:

npm install @mui/material @emotion/react @emotion/styled

• You must install the appropriate fonts…Roboto font is required by default.

npm install @fontsource/roboto

After installing, add the following imports to your App.js

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Hello World!

As a first test, I added an import line and a button to our initial screen. Success.

App.js:  
import Button from '@mui/material/Button';
<...>
function App() {
  return  (
     ...
     <Button variant="contained">Hello World</Button>;
     ...
)}

Typography

Done playing…for the first major update, I will update our text using the Typography component. This will give us consistent font weights and sizes.

The following import needs to be added:

import Typography from '@mui/material/Typography';

Replacing our standard <h1> with <Typography variant=’h1' gutterBottom component=”div”> and updating the rest of the elements on our home page changed the look. I ended up reducing the welcome text from h1 to h3

Adding a <Container> around the text on the page allows us to have it horizontally centered, moving away from the left edge of the screen. <Container> accepts a prop value of maxWidth, which can be set to xl, lg, md, sm, xs, or a fixed value. This value determines how much of the horizontal screen space our text will occupy.

Styling our cards allowed me to update text and buttons, although the button placement needs some work:

Placing the cards in a box shifts the buttons under the image and defines each card as a separate entity:

Grouping our buttons places a nice line between them:

But wait! There is a <Card> component. This component allows us to lay out a card with separate sections for media (image/video), content (text), and actions (buttons). With the kittens contained in a <Box>, above, I had trouble with the boxes overlapping each other when the screen size was reduced. Switching to <Card>, the cards nicely resize and shift within the grid when our display window changes:

A grid defined in our CatContainer component nicely contains the cards. Grid items are placed within the grid…in our case the cat cards are placed inside a grid item (see above) so they are properly handled within the Grid container.

One big problem remains on the search screen…our filter dropdowns are smashed on the left side of the screen rather than being displayed along the top:

This is because the filters, provided by the OptionPicker component, are grouped within a <div>, not a special control. And the search screen itself is still built by <div> which contains the OptionPicker and the CatContainer grid.

We would like the OptionPicker and the CatContainer stacked, one on top of the other. The <Stack> component will allow us to do just that:

Closer! But now we see the OptionPicker boxes are expanded to full screen size, rather than lining up right next to each other. Let’s revisit the OptionPicker.

Replacing ‘fullWidth’ with a ‘minWidth’ gives us what we are looking for: dropdowns in a single row, labeled and nicely styled:

We would now like to make the ‘Add Cat’ form stand out a bit on its page…centered, with a background, and a better looking button

Placing the form in a container allows us to center it on the screen. The <Paper> component allows us to make the form stand out, with a distinct background and ‘elevation’ to make it look like it is floating on the screen. The submit button has been modified to a standard button, which looks better than the filled background:

The updated component is shown below:

I am happy with the improvements, but would still like to see the navigation menu styled by Material-UI. It is possible, but more time consuming, so has not yet been tackled.