我试图创建一个组件“卡片”并将其用作容器。代码在没有“卡”的情况下运行良好。当我尝试添加它时,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;
}
您需要在变量card
中的类名和类名之间留一个空格。classes
因为没有空格,className
所以卡片组件中的属性就是cardexpense-item
.
它应该是这样的:
const classes = 'card '+props.className;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句