如何设置 Antd Divider 颜色

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' }} />