Accessing Material UI Theme Object in Emotion JS

I've been working on a new React project using Material UI and Emotion JS, and the way to access the Theme object has always felt a bit wonky.

Although Material UI provides it's own styling solution with Styled Components and Hook API, we preferred Emotion's CSS prop and Styled Components API better.

Fortunately Material UI provides support for Emotion JS and other style libraries.

Pass the Material UI Theme Object to Emotion's ThemeProvider

import { css } from '@emotion/core';
import { ThemeProvider } from 'emotion-theming';
import {
  createMuiTheme,
  ThemeProvider as MuiThemeProvider,
} from '@material-ui/core/styles';
import { CssBaseline } from '@material-ui/core'

const theme = createMuiTheme({  palette: {    primary: {      main: '#6772e5',    },  },});
export default function EmotionTheme() {
  return (
    <MuiThemeProvider theme={theme}>
      <ThemeProvider theme={theme}>        <CssBaseline />
        {children}
      </ThemeProvider>    </MuiThemeProvider>
  );
}

Emotion Styled Components - Access Theme from props

The theme object is passed to styled as a prop, so object destructuring is used.

import styled from '@emotion/styled'
import { IconButton } from '@material-ui/core'

const NotificationButton = styled(IconButton)`
  color: ${({ theme }) => theme.palette.gray.dark};
`

Emotion CSS String Styles - Access Theme Object

The theme object is passed as a function param to the css prop.

import React from 'react'
import { css } from '@emotion/core'
import { Box, Button } from '@material-ui/core'

const Card = () => {
  return (
    <Box>
      <Button
        css={(theme) => css`
          color: ${theme.palette.gray.dark};
        `}>
        Forgot Password
      </Button>
    </Box>
  )
}

Access Material UI's Theme Breakpoints for Responsive Media Query Styles

const CardHeader = styled.div`
  padding: 10px;

  ${({ theme }) => `${theme.breakpoints.up('lg')} {
    padding: 20px;
  }`}
`