我有一个 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 变量。
最佳答案
您位于返回 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>
关于css - 如何访问样式化组件的 props 函数内的 CSS 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58680555/