преобразовать в стилизованный компонент из css (тернарный оператор)

Question

Я пытаюсь преобразовать свой проект из 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;
  }

javascript css reactjs material-ui styled-components

4

walee 26 Янв 2022 в 16:40

Отвечает ли это на ваш вопрос? Добавить классы в стилизованный компонент

–

Alex Gru

26 Янв 2022 в 16:57

Нет, это другое, у меня есть условные имена классов

–

walee

26 Янв 2022 в 17:02

Answer 1

Для условных имен классов я предлагаю использовать импорт имен классов: 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

Answer 2

Поскольку сначала это было непонятно, вот решение, если вы используете модули 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

преобразовать в стилизованный компонент из css (тернарный оператор)

2 ответа

Похожие вопросы

Новые вопросы

javascript