条件类名转换为样式组件

Question

我正在尝试学习并将我的项目从 css 转换为样式组件（https://styled-components.com/），目前我已经转换了我的所有其他组件，除了一个我卡住的组件，检查了来自 stackoverflow 的其他示例，但它不一样种类。 我有条件类名

我的问题是如何将 InfoBox 组件转换为使用样式组件？我需要通过某种样式组件包装器注入样式还是不需要？

英语不是我的母语，所以可能会被弄错

我的代码：

import React from 'react'
import "./InfoBox.css"

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

export default InfoBox

<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是这样的（随便放什么）：

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

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

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

Answer 1

styled-component 背后的一个想法是避免使用类名。 而不是按类设置 css，您几乎没有选择。最简单的可能是在 css 代码中使用您的道具，并通过它更改样式：

const InfoBox = styeld.div`
  border-color: ${props => props.isRed ? 'darkblue' : 'black'};
  border-top: ${props => props.active ? '10px solid greenyellow' : 'red'};
  ...
`;

这样，你就不需要类名了（虽然它也可以用它来完成，很明显）。

现在，不要使用组件内的 div，而是使用我们刚刚编写的 InfoBox 样式的组件，一切顺利。