How to set Antd Divider colour

Question

I've tried setting the style colour, background colour, and border colour. All not working the divider still using the default colour. Any tips?

import {Divider } from "antd";

<Divider style={{ color: "#d8d8d8" }}>or</Divider>
<Divider style={{ backgroundColor: "#d8d8d8" }}>or</Divider>
<Divider style={{ borderColor: "#d8d8d8" }}>or</Divider>

Answer 1

basically adding this to custom css works

.ant-divider-horizontal.ant-divider-with-text-center::before,
.ant-divider-horizontal.ant-divider-with-text-center::after
{
   border-top: 1px solid red;
}

Answer 2

You need to use the ant-divider class to override the color for a divider and it should be like

.ant-divider{
  background-color: red;
}

or you can use it like

<Divider style={{'background-color':'blue'}}/>

please check here working example Demo

Answer 3

You can apply styling to the divider component. Property like borderLeft should work fine.

<Divider style={{ borderLeft: '1px solid red' }} />