react js : children style doesn’t show

I tried to create a component ‘Card’ and use it like a container. the code work well without ‘card’. when I tried to add it the ‘Card.css’ and expense-item in ExpenseItem.css doesn’t work

this is ‘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;

this is ‘Card.js’:

import './Card.css';

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

and this is ‘Card.css’:

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

and finally this is ‘ExpenseItem.css’:

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

Answer

You need a space between card and the class name in the classes variable. Because there is no space, the className attribute in the card component is just cardexpense-item.

This is how it should look:

const classes = 'card '+props.className;

By the way, you can also use ES6 template literals feature (it’s up to you but I prefer them more):

const classes = `card ${props.className}`;