MaterialUI

Layout

Grid

Official Documentation

<Grid container spacing={2}>
  <Grid item xs={12}>
    <TopBar />
  </Grid>
  <div className="cs142-main-topbar-buffer" />
  <Grid item sm={3}>
    <Paper className="cs142-main-grid-item">
      ...
    </Paper>
  </Grid>
  <Grid item sm={9}>
    <Paper className="cs142-main-grid-item">
      ...
    </Paper>
  </Grid>
</Grid>

• When my screen size is smaller than any specified screen size, components will take all 12 columns by default. In this case, when the screen size is xs, since no xs={} is specified and smallest, the Grid item will default to taking up all 12 columns. So the two paper components will stack on one another.
• If a specific size (like md, lg, or xl) is not specified, the grid system will use the settings from the closest smaller breakpoint that is defined.

theme

The default Theme Parameters

Miscellaneous

Template Literals

<ListItemText primary={`${user.first_name} ${user.last_name}`} />

• In JavaScript, strings can be created using single quotes ('), double quotes ("), or backticks (`). Backticks are used to create template literals, which is useful for formatting a string.
• ${} allows you to interpolate JavaScript expressions or variables directly into the string, as shown in the example

Component Prop

Example:

<ListItem component={Link} to={`/${user._id}`} className="list-item">
    <ListItemText primary={`${user.first_name} ${user.last_name}`} />
</ListItem>

• MUI components are built on top of standard HTML elements like div, button, a, etc.
• The component prop allows you to specify which element or component should be rendered in place of the default one. For example, if you have an MUI <ListItem />, its default rendering might be a li tag. However, you can replace that li tag with something else, like a Link (from react-router-dom or any other component), by passing the component={Link} prop.
• In the example, I’m using the component={Link} prop to turn the ListItem into a Link component from react-router-dom. Since Link expects a to={} prop (which defines the route path for navigation), I’m able to pass to={/${user._id}} as a prop to the ListItem, because the ListItem is now acting as a Link component.

Overriding Styles

Every Material UI component accepts a className prop, which allows you to apply custom CSS classes to the component. For example,

<Button className="my-custom-button">Click Me</Button>

.my-custom-button {
  background-color: green;
  color: white;
}

However, some Material UI components are composed of multiple nested elements. To target these specific parts, you need to use the global class names provided by Material UI. These class names follow a pattern like .MuiComponentName-elementName.

CSS pseudo-classes like :hover, :focus, and :disabled have higher specificity. Material UI mimics this behavior by applying state classes with higher specificity. Therefore, to override these styles, you need to match or exceed this specificity in your CSS. For example,

<MenuItem selected className="my-menu-item">Option 1</MenuItem>


.my-menu-item {
  color: black;
}

/* Increase specificity for the selected state */
.my-menu-item.Mui-selected {
  color: blue;
}

• When you add the selected prop to the MenuItem, Material UI automatically applies a special class called Mui-selected to the component. As a result, the <MenuItem selected className="my-menu-item">Option 1</MenuItem> will have color blue instead of black.

Using the sx prop

<Grid container>
  <Grid item>
    ...
  </Grid>

  <Grid item>
    ...
  </Grid>
</Grid>

The above html becomes the following in the browser, which are modified by materialUI by injecting some new classes:

<div class="MuiGrid-root MuiGrid-container">
  <!-- Grid Item -->
  <div class="MuiGrid-root MuiGrid-item">
    <!-- Content -->
  </div>
  <!-- Grid Item -->
  <div class="MuiGrid-root MuiGrid-item">
    <!-- Content -->
  </div>
  <!-- More Grid Items -->
</div>

<Grid container spacing={3} sx={{ 
  maxHeight: '80vh',
  overflowY: 'auto',
  '& .MuiGrid-root': {
    paddingLeft: '10px',
    paddingTop: '10px',
    paddingBottom: '10px'
  },
}} >

• The & represents the current component in the context of the sx prop. In this case, & refers to the Grid container component.
• '& .MuiGrid-root' targets all elements with the class .MuiGrid-root that are descendants of the Grid container.
• As a result, the '& .MuiGrid-root' applies the specified padding styles to all Grid items within the container.
• Refer to this for how to use this in more detail