How to Use Theme Provider When Using CSS Method in Emotion/React

3 min read 15-09-2024

How to Use Theme Provider When Using CSS Method in Emotion/React

In modern web development, styling components efficiently is paramount, especially when working with React. One of the popular libraries for styling in React is Emotion. It offers two main ways to style components: the css prop and the styled API. This article will focus on how to use the Theme Provider when using the css method in Emotion, ensuring a consistent and theme-based approach to styling your React applications.

Problem Scenario

The original problem is to understand how to correctly implement the Theme Provider in Emotion while utilizing the CSS method. Here is a simple code snippet that illustrates a common usage scenario:

import { css, ThemeProvider } from '@emotion/react';

const theme = {
  colors: {
    primary: '#0070f3',
    secondary: '#1DB954',
  },
};

const Button = () => {
  return (
    <button
      css={css`
        background-color: ${theme.colors.primary};
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;

        &:hover {
          background-color: ${theme.colors.secondary};
        }
      `}
    >
      Click Me
    </button>
  );
};

const App = () => (
  <ThemeProvider theme={theme}>
    <Button />
  </ThemeProvider>
);

export default App;

Corrected Understanding

The theme provider in Emotion allows us to define a theme object that can be used throughout our application. In the above code snippet, we define a simple theme with two colors (primary and secondary) and utilize them to style a button using the css prop. However, to properly leverage the theme, we should reference the theme values using the theme object provided by the ThemeProvider.

The Implementation Explained

Define Your Theme: Start by creating a theme object. This object should contain all the design tokens you'll need, such as colors, font sizes, and spacing. For example:
```
const theme = {
  colors: {
    primary: '#0070f3',
    secondary: '#1DB954',
  },
  fonts: {
    main: 'Arial, sans-serif',
  },
};
```
Use ThemeProvider: Wrap your application (or part of it) with ThemeProvider and pass the theme object as a prop. This will make your theme accessible to all styled components inside its subtree.

Access Theme in CSS: When using the css method, you can access the theme values by utilizing the function form of the css prop. This provides the theme as an argument. Here’s how you can implement it:

<ThemeProvider theme={theme}>
  <Button />
</ThemeProvider>

Inside the button component, modify the styling as follows:

const Button = () => (
  <button
    css={theme => css`
      background-color: ${theme.colors.primary};
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;

      &:hover {
        background-color: ${theme.colors.secondary};
      }
    `}
  >
    Click Me
  </button>
);

Practical Example

Let’s enhance our Button component by adding more properties based on the theme, such as font size and border. This creates a more dynamic button that can easily adapt to changes in the theme.

const theme = {
  colors: {
    primary: '#0070f3',
    secondary: '#1DB954',
  },
  fonts: {
    main: 'Arial, sans-serif',
    size: '16px',
  },
};

const Button = () => (
  <button
    css={theme => css`
      background-color: ${theme.colors.primary};
      color: white;
      padding: 10px 20px;
      border: 2px solid ${theme.colors.secondary};
      border-radius: 5px;
      font-family: ${theme.fonts.main};
      font-size: ${theme.fonts.size};
      cursor: pointer;

      &:hover {
        background-color: ${theme.colors.secondary};
      }
    `}
  >
    Click Me
  </button>
);

Conclusion

Using the Theme Provider in Emotion while applying styles with the css method not only enhances the readability of your styles but also ensures that your application remains consistent with its design tokens. By leveraging the theme effectively, you can create a scalable and maintainable codebase.

Useful Resources

By understanding how to use the Theme Provider effectively, you can unlock the full potential of Emotion for styling your React components. Happy coding!