Vijay Thirugnanam

Set styles for all elements using ThemeUI

Vijay Thirugnanam's photo
Vijay Thirugnanam
·

2 min read

ThemeUI is a library to style React components using a theme object. If you have not heard of ThemeUI, I have written a detailed guide on how to use ThemeUI. There is also a CodeSandbox to help you work with ThemeUI.

In CSS, it is easy to style all elements. 

* {
  box-sizing: border-box;
  transition: all 200ms;
}

How can I set such a style using ThemeUI?

Our first guess is that there should be some key in the theme object that we can set. For example, maybe we can use the "styles.root" key in the theme object.

styles: {
    root: {
      margin: 0,
    },
}

In the above code, I set the margin of the root element (html tag) to 0. But there is nothing in the theme object that sets the style of all elements. For doing that, ThemeUI exposes the emotion package that it uses.

Somewhere in our App like the App component, import the Global component like so:

import { Global } from '@emotion/react';

And add this component to anywhere in the component tree:

<Global
  styles={() => ({
    '*': {
      boxSizing: 'border-box',
      transition: 'all 200ms',
    },
  })}
/>

It is a lot of code to set styles for all elements in ThemeUI. This is unlike the rest of ThemeUI which is pretty intuitive. And this is something that I figured out recently. So, I thought I will share it to the Hashnode community.

React