Styling choices

Props

• when value is a string, prefer prop="value" syntax

  • (vs string-within-an-object syntax prop={'value' })

Colors

• Use theme colors (vs hardcoding values)

  • color="primary"

  • sx={{ color: 'primary.main' }}

  • sx={{ color: (theme) => theme.palette.primary.main }}

  • sx={{ color: (theme) => alpha(theme.palette.background.default, 0.8) }}

  • sx={{ backgroundColor: (theme) => alpha(theme.palette.text.primary, 0.1) }}

Other

• Use MUI's shorthand when available

  • padding: p for padding, pl for padding-left

  • margin: m for margin, ...

  • width: 1 instead of 100%

• Use numbers (vs pixels) for borderRadius, margin, padding, gap, ...

  • the numbers are used as multipliers against the MUI theme's spacing value (usually 4px)... essentially, it will just keep things looking good and consistent throughout the app

• CSS Flexbox (<Stack />) or CSS Grid (<Grid />)

  • use gap instead of spacing