如何在样式组件的三元运算符中使用 css 根变量？

Question

我正在将 React 与 Typescript 一起使用，我想知道如何在样式组件的三元运算符中使用 var(--color-primary) 而不是 "005fcc"。这是单独的样式文件：

/* 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"
`;

我试过如下但没有用...

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

Answer 1

试试吧！您的代码不起作用，因为您在模板文字中的表达式中使用了 var，它是 javascript 表达式。您需要 return CSS 变量作为字符串，就像 background-color 中回调中的简单属性，而不是模板文字中的 javascript 表达式。

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

如何在样式组件的三元运算符中使用 css 根变量？

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

styled-components