使卡片变暗。 （蚂蚁设计）

Question

我正在尝试修改Ant Design组件库中CARD组件的样式，以根据对象是否处于活动状态来使整个卡调光器。我已经有可用的活动变量，但是找不到允许我执行此操作的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>
  );
};