Question

我有一个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变量。

Answer 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>

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

1 个答案: