CODEWITHSUNDEEP
reactjsjsxantd
shalonteoh
shalonteoh

Reputation: 2074

How to set Antd Divider colour

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>

Upvotes: 7

Views: 13383

Answers (3)

Minkesh Jain
Minkesh Jain

Reputation: 1160

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

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

Upvotes: 2

shalonteoh
shalonteoh

Reputation: 2074

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

Upvotes: 5

Dhaval Patel
Dhaval Patel

Reputation: 7601

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

Upvotes: 0

Related Questions