> For the complete documentation index, see [llms.txt](https://aaron-mota.gitbook.io/aarons-style-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aaron-mota.gitbook.io/aarons-style-guide/frontend/our-systems/components/ui-libraries/mui.md).

# MUI

* **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](https://mui.com/material-ui/)
* **Sx prop** ([learn more](https://mui.com/system/getting-started/the-sx-prop/))
  * 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](https://mui.com/material-ui/guides/composition/#component-prop) (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 />`&#x20;
    * 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):

```tsx
<div>
  <p>
    Text Sample
  </p>
</div>
```

* **MUI** (do this instead):

```tsx
<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](https://www.semrush.com/blog/semantic-html5-guide/)):
    * *\*\*`variant="paragraph"` is just the styling, NOT mapping the component to HTML*

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