使卡片调光器.(蚂蚁设计)

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>
);
};