如何在样式化组件的 props 函数中访问 CSS 变量？答案

【问题标题】：How to access CSS variables inside props function of styled components?如何在样式化组件的 props 函数中访问 CSS 变量？
【发布时间】：2019-11-03 13:22:30
【问题描述】：

我有一个 React 应用程序。它使用样式化的组件。在 main.css 文件中，我定义了一个变量，例如 -

:root {
  primaryColor: 'red';
}

在 React 应用程序中，我为组件设置了样式，例如（不工作）-

const myDiv = styled.div`
  color: ${props => props.color? props.color : var(--primaryColor)};
`;

// 不工作

如果我将样式化组件用作（工作）-

 const myDiv = styled.div`
  color: var(--primaryColor);
 `;

有效。

如何使第一个案例工作？即访问样式化组件内的 css 变量。

【问题讨论】：

标签： css reactjs styled-components react-props css-variables

【解决方案1】：

您位于返回props.color 内容的表达式或包含var 表达式的字符串中。因为它是一个字符串，所以你需要用引号括起来。

const MyDiv = styled.div`
  color: ${props => props.color? props.color : 'var(--primaryColor)'};
`;

ReactDOM.render(
  <MyDiv>Some text</MyDiv>,
  root
);

:root {
  --primaryColor: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.0/styled-components.js"></script>

<div id="root"></div>

【讨论】：