Material UI - Setup in RedwoodJS

Get Help and Help Others Show & Tell
1

Introduction

The docs & UI setup command line currently don’t support Material UI, so thought I’d put together a quick tutorial. I do plan to contribute a UI setup command to perform the below automatically.

Install MUI

As per the guide: Installation - Material UI

  1. Install dependencies. yarn workspace web add @mui/material @emotion/react @emotion/styled @fontsource/roboto @mui/icons-material
  2. Include the Roboto font in your React entry point. Edit your App.tsx or App.jsx file and add the following, I put this just below the index.css import.
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Confirmation

Verify your MUI component installation is now working:

  1. Create a TestPage in your project. yarn rw g page Test.
  2. Place an MUI Button in the page. <Button variant="contained">Hello World</Button>.
  3. At the top of the file, ensure you import your button from MUI. import { Button } from '@mui/material'

Verify your MUI Icons installation is working:

  1. Within your test page add the Material UI ABC Icon. <AbcIcon fontSize="large" />.
  2. Ensure the icon is imported. import AbcIcon from '@mui/icons-material/Abc'.
5 Likes
2

Hey Tom! Thanks for contributing the writeup :slight_smile:

1 Like