Good or bad: Styled components theme helper

Joakim Sælemyr — Tue, 28 Jan 2020 14:15:39 +0000

So I've been using styled components with theming lately. And I'm wondering a bit about my approach. It might have poor performance, and it might use a theme for more than what it's intended for.

Using the `theme` obj for more than just colors

On projects I've done in the past where I've used css modules with scss, I've found it convenient to have lots of common variables to ensure consistency in sizes (margin, padding, font etc) and colors throughout a codebase. Also to be able to easily change them/and or changing themes etc.

So a theme object might look something like this (example values):

const theme = {
  width: {
    content: '60vw'
  },
  spacing: {
    sm: '0.25rem',
    md: '0.5rem',
    lg: '0.75rem',
    xl: '1rem'
  },
  color: {
    background: {
      primary: 'black',
      secondary: 'white',
      someOtherColor: 'pink'
    },
    primary: 'white',
    secondary: 'black'
  },
  font: {
    heading: {
      sm: '1.4rem',
    },
    text: {
      sm: '0.75rem'
    }
...

The attempt is to have all common properties in the same place, and be able to structure it so it's not horrible to get an overview of.

So using the values from the theme above in a component would look something like this:

const MyComponent = styled.p`
  color: ${({ theme }) => theme.color.primary};
  background: ${({ theme }) => theme.color.background.primary};
`;

This gets pretty tedious to write all the time, and I also feels it adds to much noise, reducing readability.

Q: Is it fine using theme for sizes etc in addition to colors?

Using a `get` helper func instead

Since I wanted a visually cleaner and lower effort way of accessing different nested properties in my theme obj, I wrote a function I just called get. Comparing the component above, it looks like this:

const MyComponent = styled.p`
  color: ${get('colorPrimary')};
  background: ${get('colorBackgroundPrimary')};
`;

get expects a theme property to exist on the component props object, and also a camelCased identifier which is used to look for the value. So, in my opinion it's less noise in the styling, and also easier to type.

Q: Since this is a function, instead of just accessing props on an object, it has to perform some operation to know where to lookup the value. So it'll definitively have a performance hit. But will using a function for purposes like this have an actual noticeable/critical performance hit regarding smooth rendering etc?

Guess it probably depends on the implementation and device..

Anyway I'm liking the approach, it's straight forward to use and readability is not suffering too much.What do you think?

If anyone's interested, I can share the func.

DEV Community: Joakim Sælemyr

Good or bad: Styled components theme helper

Using the theme obj for more than just colors

Using a get helper func instead

Using the `theme` obj for more than just colors

Using a `get` helper func instead