Material-UI Overview

Resource & Material-UI QuickStart

Material-UI is a React Component Library that offers reusable Components that are customizable through a Theming system that comes baked into Material-UI.

There are 2 key advantages to Material UI:

• Component Library
• Theming

I'll go over all of them and how to use them below.

The Component Library

Material-UI's component library is very extensive offering everything from snackbars to date pickers and taking advantage of Material-UI is quite simple:

// Import from @material-ui/core
// All material-ui components are exposed at the index
// so you can destructure them out easily
import {
  Button,
  Modal,
  Typography,
} = from '@material-ui/core';
const Component = () => {
  const [openModal, setOpenModal] = useState(false);
  return (
    <div>
      <Button
        color="primary"
        variant="outlined"
        onClick={() => setOpenModal(true)}
      >
        {/*
          This text adopts the material-ui typography
          variant of "button" automatically by being
          inside a Material Component
        */}
        Click this Button to open Modal
      </Button>
      <Modal
        open={openModal}
        onClose={() => setOpenModal(false)}
      >
        <Typography variant="h4">
          Modal Title
        </Typography>
        <Typography variant="body1">
          Lorem ipsum dolor amet marfa aesthetic salvia brooklyn farm-to-table art
          party man bun roof party af gentrify. Glossier fingerstache hell of microdosing.
        </Typography>
      </Modal>
    </div>
  )
};

Theming in Material-UI

Theming in material is powerful because of its ability to be programatically changed and provided throughout the react application by use of context.

Theming allows us to change:

• Base colors used by components
• Base typography styles to apply and how to scale them for various device sizes
• Base component styles to use sitewide Learn More

To utilize theming at the root level of our app we use the provided ThemeProvider and pass in our customized Resouce Theme (we will dive into how we define themes a bit further down).

<ThemeProvider theme={resourceTheme}>
  <App />
</ThemeProvider>

This will change all the styles of components nested within the App component.

Furthermore Material-UI themes also support theme nesting so we could take advantage to theme products to use customer branding

// ...Inside <App />
const Onsite = () => {
  const [customerTheme] = useQuery(CUSTOMER_THEME):
  return (
    <ThemeProvider theme={customerTheme}>
      <CustomerThemedOnsite />
    </ThemeProvider>
  )
}