How to use Material UI Theme with Styled Components in your React Application

Material UI is one of the most popular design systems for web and mobile applications. Sure, it has a steeper learning curve but once you get familiar with it, you can’t move away from it. The best thing about Material UI is the extensive library of components that you can use in your web app. Whether you need a Data grid, a table, an accordion or a tooltip, Material UI has it all. All you need to do is plug and play with it in your React application.

At the same time, Styled components gives you an extra advantage to use CSS in JS. What many users don’t realize is that Material UI combined with Styled Components makes a great combination for frontend app development. You get the best of both worlds.

Why do we need Styled Components with Material UI in the first place?

A lot of you might have this question in mind. Isn’t Material UI supposed to be a complete design system? Why do we need an extra layer of CSS in our app?

Trust me, I had the same questions when I was starting out with Material UI. The biggest reason for using ‘styled-components’ with Material UI is that it allows you to keep CSS styles separate from your React components.

Just to give you an example, this is how you would use MUI’s own styled utility in your app:

import * as React from 'react';
import { styled } from '@mui/system';

const MyComponent = styled('div')({
color: 'darkslategray',
backgroundColor: 'aliceblue',
padding: 8,
borderRadius: 4,
});

export default function BasicUsage() {
return Styled div;
}

This is how you would use the styled utility. But do you see the problem here? Imagine if it’s a big React component with tons of divs and jsx. The size will get even bigger if you also included the styles in the same component file.

Sure, you could separate it in to its own file. But then, wouldn’t it be better to use pure CSS properties instead of a different syntax. I mean you are still keeping CSS separate from the component so why not use pure CSS systax that you already know like so:

export const NavbarStyled = styled(AppBar)`
    .toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .searchField {
        display: flex;
        align-content: center;
        background-color: #0f0f0f;
    }
 `;

Isn’t that amazing?

Just to summarize it, here are the two main benefits of using styled-components with MUI:

• Separate CSS styles from your React components
• Use pure CSS syntax to style your components

How to use Material UI theme inside Styled Component classes

The next question that comes in your mind should be, which theme provider should we use in our app. Material UI and Styled components, both have their own Theme Providers. How can you use one’s theme in the other.

Well, I am here to simplify this for you so you won’t have to look for a solution everywhere. For this example, we will be incorporating Material UI’s theme into styled components.

Now heres’ the good news: You don’t need another library except for Material UI.

Styled components are now built into Material UI. You just need to make sure that you import styled from the correct path.

Let’s go over it step-by-step:

npm install @mui/material 

Now, create a theme for your React application like so:

import { Theme } from '@mui/material';
import { green, red, yellow } from '@mui/material/colors';
import { createTheme } from '@mui/material/styles';

declare module '@mui/material/styles' {
interface Palette {
  neutral: Palette['primary'];
}

interface PaletteOptions {
  neutral: PaletteOptions['primary'];
}
}

const theme = createTheme({
  palette: {
    primary: {
      light: green[500],
      main: green[900],
      contrastText: '#fff',
    },
    secondary: {
      main: yellow[500],
    },
    error: {
      main: red.A400,
    },
    neutral: {
      main: '#ffffff',
      contrastText: green[500],
    },
  },
});

export default theme;

Now, in your App.js, import the theme provider like this:

import { ThemeProvider } from "@mui/material";
import theme from "./theme";

export default function Home() {
  return (
    <ThemeProvider theme={theme}>
      <div>Hello World</div>
    </ThemeProvider>
  );
}

Now, lets say, you want to use your theme in your app’s Navbar component. Here’s how you would creare your component:

const Navbar: React.FunctionComponent = () => {
  return (
    <NavbarStyled>
      <Toolbar className="toolbar">
        <Typography variant="h6" component="h1">
          REACT APP
        </Typography>

        <Box className="search-field">
          <Search />
          <InputBase placeholder="Search Items..." />
        </Box>

        <Box>Icons</Box>
      </Toolbar>
    </NavbarStyled>
  );
};

export default Navbar;

Now, create a styles.ts file for your Navbar, for example, Navbar.styles.ts. Here’s how you can use your Material UI theme in your CSS using props:

import { AppBar } from '@mui/material'
import { styled } from "@mui/material/styles"
import { alpha } from '@mui/material';

export const NavbarStyled = styled(AppBar)`
    .toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .search-field {
        display: flex;
        align-items: center;
        background-color: ${props => alpha(props.theme.palette.neutral.main, 0.8)};

        &:hover {
    background-color: ${props => alpha(props.theme.palette.neutral.main, 0.5)};
  }
    }
`;

And that’s it. It’s that simple. Until the previous version of MUI, the process used to be a bit complex. But thanks to v5 and later, this has been simplified and it has become very easy to use both libraries with each other.

Now you can enjoy the real flavor of pure CSS with your MUI components and also keep your React components CSS-free.

If this guide helped you please share it in the comments section.