Styling

padding, margin, border radius

Use some multiple of 4px [1][2], which is just sort of a standard that has been around and that usually visually works well

border radius

  • with MUI components, use integers (e.g. borderRadius={4})

  • MUI handles them as multipliers against 4px or 8px

border

Generally, stay away from using border.

Instead, aim for backgroundColor differences between the background and the "higher zIndex item" (and boxShadow as needed).

Last updated