css - 使卡变暗。 ( Ant 设计)

Question

我正在尝试修改 Ant Design 组件库中 CARD 组件的样式，使整个卡片根据对象是否处于事件状态而变暗。我已经有了可用的 active 变量，但找不到允许我执行此操作的 css 或组件属性。

这里有任何帮助，这是我的第一个主要前端元素，我主要是嵌入式开发人员和后端开发人员。

提前致谢

Answer 1

您可以使用 headStyle 和 bodyStyle 属性为卡片设置样式。这是一个简化的例子

https://codesandbox.io/s/silly-nash-rpijp

const App = props => {
  const cards = [
    {
      title: "Card Title",
      available: true
    },
    {
      title: "Another Card",
      available: false
    },
    {
      title: "Last Card Title",
      available: true
    }
  ];
  return (
    <div style={{ background: "#ECECEC", padding: "30px" }}>
      {cards &&
        cards.map(card => (
          <Card
            title={card.title}
            bordered={false}
            headStyle={{ color: card.available ? "#000" : "#d2d2d2" }}
            bodyStyle={{ color: card.available ? "#000" : "#d2d2d2" }}
            className="card"
          >
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
        ))}
    </div>
  );
};