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

【问题标题】：Make card dimmer. (ant design)使卡片变暗。（蚂蚁设计）
【发布时间】：2019-12-23 21:45:18
【问题描述】：

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

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

提前致谢，

【问题讨论】：

标签： css reactjs styles frontend antd

【解决方案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>
  );
};

【讨论】：