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 of 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:

const StyledButton = styled(Button)(({ theme }) => ({
  "&.MuiButton-root": { margin: theme.spacing(1) },
  "&.MuiButton-contained": { borderRadius: 50 },
  "&.MuiButton-sizeSmall": { fontWeight: theme.typography.fontWeightLight },
}));
export default function App() {
  return (
    <>
      <StyledButton>First</StyledButton>
      <StyledButton variant="contained">Second</StyledButton...