DIV的反应/ CSS背景颜色始终为白色

Question

我的react应用程序中有一个小的CSS问题，但是我找不到解决它的方法。

无论我设置的颜色（十六进制，RGB或RGBA），div的背景始终为白色。即使边界半径也不起作用。

这是我的代码：

import React from "react";
import "../styles/card.css";

export default class Cards extends React.Component {
  render() {
    return (
      <div className="card">
        <img src="../images/cards/BR-Customcard-back.png" alt="card" />
        <span>Card Name</span>
      </div>
    );
  }
}

父元素：

import React from "react";
import "../styles/cards.css";
import Card from "./Card";

export default class Cards extends React.Component {
  render() {
    return (
      <div className="Cards" style={{ padding: "10px" }}>
        <Card />
        <Card />
        <Card />
      </div>
    );
  }
}

CSS：

.card {
  background-color: rgba(107, 66, 30, 0.4);
  width: 282px;
  height: 417px;
  margin: 10px auto 10px auto;
  text-align: center;
  border-radius: 20px;
}

Answer 1

将className更改为class。属性错误