How to Use CSS Variables with Styled Components

No matter how you see it, becoming better at CSS makes you a more effective front-end developer. Adding to its arsenal, CSS has introduced CSS variables, also known as Custom Properties.

Now, styled-components have been a wonderful feature for front-end development, with features like passing in props and leveraging them to manipulate styles; it is no wonder that more and more people prefer it for front-end landscaping. Ideally, styled-components are a blessing, but when you add more prop-based styles into the mix, it can get difficult to understand in the future.

This is where CSS variables come in. CSS variables and styled-components are bound to ensure the next developer understands our purpose. In this article, we will see how to use CSS variables with styled-components to improve your workflows and avoid a tangled code.

Before we start, here are a few things you need to know about CSS variables.

Variable's value can be called with the var keyword. Think of it as a getter function.
Custom properties start with two dashes, differentiating them from traditional CSS.
The type of value they hold is not limited to colors and pixels only. They can have any value.
The CSS variables can be attached to any selector, not just the root HTML tag!
If the CSS variable is not defined, you can allot a default value.

To better understand the pairing of CSS variables with styled-components, let’s look at a simple Button component.

const Button = styled.button`
  height: 32px;
  padding: 0 32px;
  border-radius: 16px;
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 1px 1px 0px #3a00df;
  background: linear-gradient(170deg, #359eff 5%, #3a00df 95%);
`;

render(<Button width={60}>Hello World</Button>);

Looking at the code, you can tell that the button is small and not up to industry standards. It would help if it were between 44px to 48px tall. CSS variables provide a great answer to this problem. Instead of specifying how each component responds at different breakpoints, we pass a reactive variable that tracks it for us.

const GlobalStyles = createGlobalStyle`
 html {
   --min-tap-target-height: 48px;

   @media (min-width: ${(props) => props.theme.bp.desktop}) {
     --min-tap-target-height: 32px;
   }
 }
`;

With this, the responsive components get much simpler.

const Button = styled.button</strong> <strong> height: var(--min-tap-target-height);</strong> <strong>; </pre>

const TextInput = styled.input`
 height: var(--min-tap-target-height);
`;

Now regardless of the viewport size, 'height' will always point to the same variable. The difference being that 'the variable' will change its value as the window size changes. Looking at the code, you can tell that we are reusing the button without modifying it. You can get target specific variables that the button will use without actually needing to pass styles around. Thus, allowing you to make use of the button without any modification. A truly reusable component.

There is a drawback when using CSS variables with styled-components. With styled-components, you can put your variables anywhere you want, including media queries, but CSS variables cannot be used near these media queries. Though there is a rumor around methods that may let this happen, it is unfortunately still a rumor.

Despite the drawback, combining the two opens up a wide range of opportunities for a developer. It also promotes a more organized environment that increases efficiency and workflow. Whether you plan to use CSS variables with styled-components or not, it is still good to know how to use them.

Other useful articles: