javascript - 使用 Props 在 React App 中未实现 Css 类

Question

下面是组件的代码：

卡组件：

import "./Card.css";

function Card(props) {
  const classes =
    "card" +
    props.className; /* css classes of "ExpenseItem Component" and "Card component in "classes" */

  return <div className={classes}>{props.children}</div>;
}

export default Card;

费用项目组件：

import ExpenseDate from "./ExpenseDate";
import Card from "./Card";
import "./ExpenseItem.css";

function ExpenseItem(props) {
  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} /> /*ExpenseDate component imported to show date from another component*/
      <div className="expense-item__description">
        <h2>{props.title}</h2>

        <div className="expense-item__price">${props.amount}</div>
      </div>
    </Card>
  );
}

export default ExpenseItem;

您浏览了上面的片段，现在我面临的问题是，当我使用 ExpenseItem 组件中的 Card 组件将组件包装在 Card JSX 标签内时，它会破坏 CSS 并且不使用我的 CSS 类通过在 Card 组件中使用 const classes 变量来实现，但是如果我在ExpenseItem中使用 div 而不是 Card，则该组件可以正常工作。下面我也附上两个截图..

使用 div 标签：

带卡标签：

标签： javascriptcssreactjsreact-props

Answer 1

请在“卡片”类之后放置一个空格，以便所有类名用空格分隔。

const classes = "card " + props.className;