Css class 未在 React App 中使用 Props 实现

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;

ExpenseItem 组件：

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 类变量来实现，但是如果我在 [=28] 中使用 div 而不是 Card =]ExpenseItem 该组件工作正常。下面我也附上了两个截图..

有div个标签：

带有卡片标签：

Answer 1

请在“卡片”class后加一个space，这样所有的class名字都被space隔开。

const classes = "card " + props.className;

Answer 2

您的 classes 变量在字符串

中需要一个 space

例如

const classes = "card " + props.className
// or
const classes = `card ${props.className}`

Css class 未在 React App 中使用 Props 实现

Css class is not implemented in the React App using Props

javascript

css

reactjs

react-props