A continuación se muestra el código de los componentes:

Componente de la tarjeta:

 import "./Card.css"; function Card(props) { const classes = "card" + props.className; /* css classes of "ExpenseItem Component" and "Card component in "classes" */ return <div className={classes}>{props.children}</div>; } export default Card;

Componente ExpenseItem:

 import ExpenseDate from "./ExpenseDate"; import Card from "./Card"; import "./ExpenseItem.css"; function ExpenseItem(props) { return ( <Card className="expense-item"> <ExpenseDate date={props.date} /> /*ExpenseDate component imported to show date from another component*/ <div className="expense-item__description"> <h2>{props.title}</h2> <div className="expense-item__price">${props.amount}</div> </div> </Card> ); } export default ExpenseItem;

repasó los fragmentos anteriores, ahora el problema al que me enfrento es que cuando uso el componente Card en el componente ExpenseItem para envolver el componente dentro de las etiquetas Card JSX, rompe el CSS y no usa las clases CSS. implementando usando la variable de clases const en el componente Card, pero si uso el div en lugar de Card en ExpenseItem , el componente funciona bien. A continuación, adjunto las capturas de pantalla también.

Con etiquetas div:

Con etiquetas de tarjeta: