从CSS转换为带样式的组件(三元运算符) [英] convert to styled component from css (ternary operator)

问题描述

我正在尝试将我的项目从CSS转换为样式组件(https://styled-components.com/)，目前我已经转换了我所有的其他组件，除了一个我已经粘贴的组件，检查了来自Stackoverflow的其他示例，但它不是同一种。 我有条件类名称

我的问题是如何将infobox组件转换为使用样式组件，我的问题是这个‘类名称’转换为样式组件有点复杂，有什么想法吗？

英语不是我的母语，所以可能会被误解

我的代码：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

import React from 'react'
import "./InfoBox.css"
import { Card } from "@material-ui/core"

function InfoBox({ isRed, active, activetored, ...props }) {
    return (
        <Card onClick={props.onClick}
            className={`infoBox ${active && "infoBox--selected"} 
            ${activetored && "infoBox--selectedtored"}
            ${isRed && "infoBox--red"} `} >
           
        </Card>
    )
}

export default InfoBox

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<div className="app__stats">
          <InfoBox
            isRed
            active={typeofCase === "cases"}
            onClick={(e) => setTypeofCase('cases')}
           
          />
          <InfoBox
            isGreen
            active={typeofCase === "recovered"}
            onClick={(e) => setTypeofCase('recovered')}
         
          />
          <InfoBox
            isRed
            activetored={typeofCase === "deaths"}
            onClick={(e) => setTypeofCase('deaths')}
           
          />
        </div>

css是这样的(你可以放任何东西)：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

 . infoBox--selected {
  border-top: 10px solid greenyellow;
  }

  . infoBox--selectedtored {
  border-top: 10px solid red;
  }

  . infoBox--red {
  border-color: darkblue;
  }

推荐答案

若要开始，请参阅here如何在样式化组件中使用道具。 有了这些道具，您可以在样式组件中做任何您想做的事情，并且可以在您的代码中实现这一点，如下所示：

import React from 'react'
import "./InfoBox.css"
import { Card } from "@material-ui/core"
import styled from 'styled-components'

const StyledCard = styled(Card)`
  border-top: ${({$active, $activetored}) => $active ? '10px solid greenyellow' : $activetored && '10px solid red'};
  border-color: ${({$isRed}) => $isRed && 'darkblue'};
`

function InfoBox({ isRed, active, activetored, ...props }) {
    return (
        <StyledCard $isRed={isRed} $active={active} $activetored={activetored} onClick={props.onClick}>
           
        </StyledCard>
    )
}

export default InfoBox

请注意，如果活动和激活都为真，则可能会根据三元条件的顺序相互覆盖。如果两个道具都设置为True，则您的示例不会显示这种情况，因此应该可以。

这篇关于从CSS转换为带样式的组件(三元运算符)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！