Я пытаюсь преобразовать свой проект из CSS в стилизованный компонент (https://styled-components.com/) , на данный момент я преобразовал все свои другие компоненты, кроме одного компонента, который я застрял, проверил другие примеры из stackoverflow, но это было не то же самое. У меня есть условные имена классов

Мой вопрос заключается в том, как преобразовать компонент InfoBox для использования стилизованного компонента, моя проблема в том, что это «имя класса», которое немного сложно преобразовать в стилизованный компонент, есть идеи?

Английский не мой родной язык, поэтому могу ошибаться

Мой код:

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
<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;
  }
4
walee 26 Янв 2022 в 16:40
Отвечает ли это на ваш вопрос? Добавить классы в стилизованный компонент
 – 
Alex Gru
26 Янв 2022 в 16:57
Нет, это другое, у меня есть условные имена классов
 – 
walee
26 Янв 2022 в 17:02

2 ответа

Для условных имен классов я предлагаю использовать импорт имен классов: https://www.npmjs.com/package/classnames

Синтаксис действительно легко читается, и вы можете создавать с его помощью сложные имена классов. В вашем случае код может быть примерно таким:

import classNames from 'classnames';

....

className={classNames('infoBox', {
  'infoBox--selected': active,
  'infoBox--selectedtored': activetored,
  'infoBox--red': isRed
})}
0
Trevor 26 Янв 2022 в 16:55
Я хочу использовать этот styled-components.com
 – 
walee
26 Янв 2022 в 17:17

Поскольку сначала это было непонятно, вот решение, если вы используете модули CSS вместо этого:

Во-первых, импортируйте актуальные стили из файла CSS:

import * as styles from "./InfoBox.css"

Затем вы можете обратиться к доступным классам в className, например:

className={styles['infoBox'] + `${active && styles['infoBox--selected']`} 
0
Alex Gru 26 Янв 2022 в 16:58
Нет, я имею в виду этот: const Div = styled.div``, но вы можете оставить его, он также поможет другим
 – 
walee
26 Янв 2022 в 16:54
Я хочу избавиться от css и вместо этого использовать стилизованные компоненты
 – 
walee
26 Янв 2022 в 17:08