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...