css - 如何在样式化组件的 props 函数中访问 CSS 变量?
问题描述
我有一个反应应用程序。它使用样式化的组件。在 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>
推荐阅读
- c++ - 如何使用共享基类迭代 std::tuple 的元素?
- powershell - Powershell `Set-MpPreference` 无法识别
- android - 反应原生 android webview 问题,pdf/docx/xlsx 未加载
- javascript - 如何将输入单选值分配给文本区域内容?
- c# - Xero 发票使用标准 .NET 库发送电子邮件
- java - 使用超类型标记的类型安全异构 Map
- mongodb - Spring Reactive MongoDB:如何捕获运行时异常?
- python - 仅当使用另一个参数时才可选的参数在 python 中的文档约定是什么
- jbpm - 呼叫活动的 JBPMJunitbaseTestCase
- javascript - 页面重新加载时Vue ChartJS不呈现