Material UI (MUI) styling solutions

when to use sx as opposed to style?
style is inline styling provided by html
sx is provided by material UI
TLDR; use sx for dynamic styling and style for static styling.

MUI system

• sx prop
• styled-component API
• theme thing

MUI system vs styled

• system is newer, prob takes performance hit
• styled takes more code.

apparently there is also the classes, but I think this is old/deprecated
classes is a prop that holds all the classes that apply to that component.

Theme

MaterialUI provides the useTheme hook.
Directly importing from the file that contains the json of all the colors serve them statically, this has less overhead of React having to lookup the value in context but has the downside that the colors won't be updated dynamically, if your app has a light/dark theme option for example.

0. A theme object is created with the createTheme function. This object includes colors, typography, spacing, breakpoints, component overrides, etc...
1. Wrap your app with <ThemeProvider theme={theme}> to make the theme available throughout the component tree
2. now you have multiple ways to use theme values:
   • In styled-components: Access via theme.palette.primary.main
   • In sx prop: { color: 'primary.main' } (MUI automatically resolves theme values)
   • In component props: <Button color="primary"> uses theme colors
   • Typography variants: <Typography variant="caption"> uses theme typography

Typography

zIndex

you shouldn't hardcode zIndex values and instead use the MUI Theme zIndex object in order to have a single source of truth that documents the hierarchy of your entire app

If you are using TypeScript, it will complain that custom keys like navPanel and paywall do not exist on the default ZIndex type. You need to use Module Augmentation to teach TS about your new keys.
Create a file called mui.d.ts (or add to your existing type declarations):
https://gemini.google.com/app/bfbfd699990b7d55

responsive design

https://muhimasri.com/blogs/mui-breakpoint/