Estoy tratando de convertir mi proyecto de css a un componente con estilo ( https://styled-components.com/ ), en este momento he convertido todos mis otros componentes excepto un componente que he atascado, verifiqué otros ejemplos de stackoverflow pero no fue así del mismo tipo. Tengo nombres de clase condicionales.
Mi pregunta es cómo convertir el componente InfoBox para usar un componente con estilo, mi problema es este 'nombre de clase' que es un poco complicado de convertir a un componente con estilo, ¿alguna idea?
el inglés no es mi lengua materna, por lo que podría estar equivocado
mi código:
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 es así (puedes poner lo que sea):
. infoBox--selected { border-top: 10px solid greenyellow; } . infoBox--selectedtored { border-top: 10px solid red; } . infoBox--red { border-color: darkblue; }Como no estaba claro al principio, aquí hay una solución si está usando módulos CSS en su lugar:
Primero, importe los estilos reales de su archivo CSS:
import * as styles from "./InfoBox.css" Luego puede consultar las clases disponibles en className , así:
className={styles['infoBox'] + `${active && styles['infoBox--selected']`}Para nombres de clase condicionales, sugiero usar la importación de nombres de clase: https://www.npmjs.com/package/classnames
La sintaxis es realmente fácil de leer y puede crear nombres de clase complejos con ella. En tu caso el código podría ser algo como esto:
import classNames from 'classnames'; .... className={classNames('infoBox', { 'infoBox--selected': active, 'infoBox--selectedtored': activetored, 'infoBox--red': isRed })}Para comenzar, vea aquí cómo usar accesorios con componentes con estilo. Con esos accesorios, puede hacer lo que quiera dentro de un componente con estilo y puede lograrlo en su código de la siguiente manera:
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 InfoBoxTenga en cuenta que active y activetored pueden anularse entre sí dependiendo de su orden de condición ternaria si ambas son verdaderas. Su ejemplo no muestra un caso de este tipo donde ambos accesorios están configurados como verdaderos, por lo que debería estar bien.