我試圖創建一個組件“卡片”并將其用作容器。代碼在沒有“卡”的情況下運行良好。當我嘗試添加它時，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;
}
uj5u.com熱心網友回復：
您需要在變數card中的類名和類名之間留一個空格。classes因為沒有空格，className所以卡片組件中的屬性就是cardexpense-item.
它應該是這樣的：
const classes = 'card ' props.className;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/488897.html
標籤：javascript css 反应 反应钩子 jsx
上一篇：如何在CSS中設計通知容器？