General

• MUI Component APIs (available props) & Demos

  • You can find all the MUI components’ APIs (available props, etc.) and their demos in MUI's quite nice documentation

• Sx prop (learn more)

  • Beyond what is natively available to each MUI component for styling them (aka styling-related props -- see their API page to determine that), you will do most additional styling within the sx prop (which all MUI components have)

• Component prop

  • If you’d like to, you can use the “component” prop on MUI components to map the MUI component to a certain JSX/HTML element (e.g. component=“header”), although most of the mappings are already done, so this is mostly only used for the MUI <Box /> component, for which the default mapping is just <div />

    • e.g. <Box component="img" src="…" width={200} /> would result in a final <img … /> HTML element, and also gives the <Box /> component access to the attributes that are normally available for the <img /> element (e.g. src, width, height, alt, etc.)

Always prefer MUI components (vs plain JSX)

• JSX (don't do this):

<div>
  <p>
    Text Sample
  </p>
</div>

• MUI (do this instead):

<Box>
 <Typography variant="paragraph">
   Text Sample
 </Typography>
</Box>

• MUI (example 2):

  • Using the component prop, you can map an MUI component to become a certain HTML element (do this if you feel like taking into consideration the final HTML outputted to the screen, and want to follow “semantic HTML” guidelines):

    • **variant="paragraph" is just the styling, NOT mapping the component to HTML

<Box>
 <Typography component="p" variant="paragraph">
   Text Sample
 </Typography>
</Box>