How to change divider color inside the card component in ant ui

Question

I used card component from ant ui, I changed the color of the background and text color in it, but the divider color inside the card is not changing, is there a way to change the color of the divider inside the card component? here is the code for card

<div>
        <Card
          title={
            <Title level={5} style={{ color: 'white' }}>
              Avi-Todo - 1
            </Title>}
          bordered={false}
          style={{ width: 600, margin: '10px 0px', background: '#292929', color: 'white' }}
          extra={<Title level={5} style={{ color: 'white' }}>16-April-22 10:25 AM</Title>}>
          <p>{this.props.ptodo}</p>
        </Card>
</div>

here is how it looks

How to change the divider color inside that card component?

Answer 1

Create a css file and add the following

.ant-card-head {
  border-bottom: 1px solid #f41d1d;
}