反应js:儿童风格不显示

图菲克·本赫利法

我试图创建一个组件“卡片”并将其用作容器。代码在没有“卡”的情况下运行良好。当我尝试添加它时,ExpenseItem.css 中的“Card.css”和费用项目不起作用

这是'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;

这是'Card.js':

import './Card.css';

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

这是'Card.css':

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

最后这是“ExpenseItem.css”:

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

您需要在变量card中的类名和类名之间留一个空格。classes因为没有空格,className所以卡片组件中的属性就是cardexpense-item.

它应该是这样的:

const classes = 'card '+props.className;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章