Working with styles and themes

Included with Material-UI are systems for extending the styles of UI components and extending theme styles that are applied to all components. In this section, you'll learn about using both these systems.

Making styles

Material-UI comes with a styled() function that can be used to create styled components based on JavaScript objects. The return value of this function is a new component with the new styles applied.

Let's take a closer look at this approach:

import "typeface-roboto";
import React from "react";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";
 
const StyledButton = styled(Button)(({ theme }) => ({
  "&.MuiButton-root": { margin: theme.spacing(1) },
  "&.MuiButton-contained": { borderRadius:
    theme.shape.borderRadius + 2 },
  "&.MuiButton-sizeSmall...