Skip to content

Material UI

Material UI (MUI) is the component library and styling system used throughout the frontend. It provides common components (Buttons, Dialogs, Inputs, DataGrid, Date pickers) and theming capabilities.

How it’s used in this project

  • Theme: A custom theme is created in app/frontend/src/index.tsx with createTheme and wrapped with ThemeProvider to set the primary color and provide consistent styling.
  • Components: Many UI elements use MUI components directly (see imports across app/frontend/src/components/**). The codebase composes MUI components into smaller reusable atoms.
  • Additional MUI packages: This project uses @mui/x-data-grid for tabular data and @mui/x-date-pickers for date inputs.

Styling details

  • Global CSS and component SCSS coexist, atoms often have a corresponding .scss file (e.g. Button.scss, TextField.scss) where project-specific overrides and layout styles are defined.
  • The project also depends on @mui/styled-engine and @emotion/* packages for MUI v5 styling integration.