React 根据条件获取样式化组件答案

【问题标题】：React get styled component based on conditionReact 根据条件获取样式化组件
【发布时间】：2020-01-31 03:52:45
【问题描述】：

我正在尝试将我的项目更改为专用样式组件。我有这样的东西在

 <div className={isGrid ? "card-grid" : "card-list"}>

我的 div 根据条件获取卡片网格或卡片列表类名。我将如何使用 styled-component 而没有 css 文件来实现它？我还需要 className 始终低于 600px (@media)

【问题讨论】：

【解决方案1】：

在样式组件中，您可以使用${prop => prop.isGrid} 来呈现该逻辑。对于媒体查询，您也可以在样式组件中使用常规查询。

【讨论】：

关于这个的更多细节？
就像在常规 React 中一样，您可以将 props 传递给您的样式组件，并使用上面显示的语法。这是他们文档中的一个示例。 styled-components.com/docs/basics#adapting-based-on-props
好吧，可以说我的样式组件中有这个“flex-direction: ${props => props.isGrid?'column':'row'};” ，如果 isGrid == true 我将如何检查条件并将其作为道具传递给我的组件？
你可以从你的 React 组件发送 prop。您要么将样式组件放在单独的文件中，要么与 React 组件放在同一个文件中，这并不重要。 styled-component 可能会包装你的 React 组件或者是它的子组件。这可能看起来像：jsfiddle.net/gydkmze9 尝试在此处粘贴 sn-p 但效果不佳。