Traté de crear un componente 'Tarjeta' y usarlo como un contenedor. el código funciona bien sin 'tarjeta'. cuando traté de agregarlo, la 'Card.css' y el elemento de gastos en ExpenseItem.css no funcionan

esto es 'ExpenseItem.js':

 import Card from './Card'; import ExpenseDate from './ExpenseDate'; import './ExpenseItem.css'; function ExpenseItem(props) { return ( <Card className='expense-item' > <ExpenseDate date={props.date} /> <div className='expense-item__description'> <h2 >{props.title}</h2> <div className='expense-item__price'>{props.amount} Da </div> </div> </Card> ); } export default ExpenseItem;

esto es 'Tarjeta.js':

 import './Card.css'; function Card(props){ const classes ='card'+props.className; return <div className={classes}> {props.children} </div>; } export default Card;

y esto es 'Tarjeta.css':

 .card { border-radius: 12px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); }

y finalmente esto es 'ExpenseItem.css':

 .expense-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; margin: 1rem 0; background-color: #ff0000; }