Reactjs React根据条件获取样式化组件

我正在尝试将我的项目更改为独占样式的组件使用。我有类似的东西在里面

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

我的div根据条件获取卡片网格或卡片列表类名。我将如何在没有css文件的情况下使用样式化组件实现这一点？

---

另外，我需要将类名设置为始终低于600px（@media）

的卡片网格，在样式化组件中，您可以使用

${prop=>prop.isGrid}

来呈现该逻辑。对于媒体查询，您也可以在样式化组件中使用常规查询。

更多详细信息？正如在常规React中一样，您可以将道具传递给样式化组件，并使用我上面显示的语法。下面是他们文档中的一个示例。好吧，假设我的样式化组件“flex direction:${props=>props.isGrid？column'：'row'}；”，我将如何检查isGrid==true的条件并将其作为一个道具传递给我的组件？您将从React组件发送道具。您可以将样式化组件放在单独的文件中，也可以与React组件放在同一个文件中，这并不重要。样式化组件可能会包装您的React组件，或者是它的子组件。这可能看起来像：尝试将代码段粘贴到此处，但效果不好。