How can i use css root variable in ternary operator at styled-component?

Question

I'm using React with Typescript and I wondering how to use var(--color-primary) instead of "005fcc" In ternary operator at styled-component. This is separated style file:

/* style.ts */
import styled from "styled-components";

export const Container = styled.div`
  width: 100%;
  background-color: ${({ isTransparent }: { isTransparent: boolean }) =>
    isTransparent ? "transparent" : "#005fcc"};  // <--- instead of "005fcc"
`;

I tried like below but not working...

export const Container = styled.div`
  // ...
  background-color: ${({ isTransparent }: { isTransparent: boolean }) =>
    isTransparent ? "transparent" : `${var(--color-primary}`};
`; 

Answer 1

Try it! Your code not work because you using var in expression inside template literal, it javascript expression. You need return CSS variable as string, as simple property from your callback inside background-color, and not as javascript expression inside template literal.

export const Container = styled.div`
  background-color: ${({ isTransparent }: { isTransparent: boolean }) =>
    isTransparent ? "transparent" : "var(--color-primary)"};
`;