Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
date title template thumbnail slug categories tags
2020-10-22
Accessing Material UI Theme Object in Emotion JS
post
../thumbnails/emotion-js.png
accessing-material-ui-theme-object-emotion-styled-component-css-prop
EmotionJS
emotion-js
material-ui

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;
  }`}
`