DOCSEARCHbyAlgolia
Submit Docs

Material UI v4

website·Indexed 42 days ago

https://v4.mui.com/

React components for faster and easier web development. This documentation covers v4, including the @material-ui/system, Data Grid API, theme customization, and core components like Timeline, Skeleton, and Expansion Panels.

Tokens
163.4K
Snippets
875
Records
1.4K
Agent score
64%

What's inside MUI

  1. Overview of the Material-UI Grid system

    The Grid component provides a responsive layout system based on a 12-column grid. It uses CSS Flexible Box (flexbox) to ensure consistency across different screen sizes and orientations. The system distinguishes between two types of layout roles: containers and items. Item widths are defined as percentages of the parent element, and spacing is managed via padding.

  2. Overview of Material-UI Transition components

    Material-UI provides several components to add motion to the UI:

    • Collapse: Expands vertically from the top. Use collapsedSize to set minimum height when closed.
    • Fade: Transitions from transparent to opaque.
    • Grow: Expands from the center while fading in.
    • Slide: Slides in from a specified screen edge.
    • Zoom: Expands outwards from the center.

  3. Implement content placeholders with the Skeleton component

    Use the Skeleton component to display a placeholder preview of content before data is loaded. This improves perceived performance by indicating that content is loading incrementally rather than using a generic spinner.
    {item ? (
  <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
) : (
  <Skeleton variant="rect" width={210} height={118} />
)}

  4. Use the CardActionArea component

    The CardActionArea component is used to make a card's content clickable. It inherits all props from the ButtonBase component and forwards its ref to the root element.
    import CardActionArea from '@material-ui/core/CardActionArea';
// or
import { CardActionArea } from '@material-ui/core';

  5. Handle MUI Data Grid cell events

    The MUI Data Grid provides a variety of events to track user interaction with individual cells. Most of these events provide a GridCellParams object containing details about the cell and the event.

  6. Use TextareaAutosize to create a self-expanding textarea

    The TextareaAutosize component is a React textarea that automatically adjusts its height during keyboard input and window resize events to fit the content.
    <TextareaAutosize aria-label="empty textarea" placeholder="Empty" />

  7. Center content horizontally using the MUI Container

    The Container component is a basic layout element used to center content horizontally. While containers can be nested, it is generally not required for most layouts.
    import Container from '@material-ui/core/Container';

function App() {
  return (
    <Container>
      Your content here
    </Container>
  );
}

  8. Use the TimelineContent component

    The TimelineContent component is used to wrap the content within a timeline item. It forwards the ref to the root element and passes any additional props to the underlying native root element.
    import TimelineContent from '@material-ui/lab/TimelineContent';
// or
import { TimelineContent } from '@material-ui/lab';

  9. Import and use the SpeedDialAction component

    The SpeedDialAction component is used within a Speed Dial to represent an individual action button. It wraps a Fab (Floating Action Button) and an optional Tooltip.
    import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
// or
import { SpeedDialAction } from '@material-ui/lab';

  10. Import and use the ImageListItemBar component

    The ImageListItemBar component is used to display a title, subtitle, and an optional action icon over an item in an Image List. The component name MuiImageListItemBar can be used for providing default props or style overrides at the theme level.
    import ImageListItemBar from '@material-ui/core/ImageListItemBar';
// or
import { ImageListItemBar } from '@material-ui/core';

  11. Prevent server-side rendering with the NoSsr component

    The NoSsr component is used to remove specific components from Server Side Rendering (SSR). This is useful for avoiding broken dependencies that do not support SSR, improving time-to-first paint by rendering only above-the-fold content on the client, reducing server rendering time, or implementing service degradation under heavy server load.
    import NoSsr from '@material-ui/core/NoSsr';
// or
import { NoSsr } from '@material-ui/core';

  12. Implement a basic Tree View with MUI

    A Tree View widget presents a hierarchical list, commonly used for file system navigators or nested menus. It is composed of a TreeView wrapper and TreeItem children to represent the hierarchy.
    import TreeView from '@mui/lab/TreeView';
import TreeItem from '@mui/lab/TreeItem';

<TreeView>
  <TreeItem nodeId="apps" label="Applications" />
  <TreeItem nodeId="docs" label="Documents" />
</TreeView>