如何設置 Antd Divider 顏色

Question

我試過設置樣式顏色、背景顏色和邊框顏色。 所有不工作的分隔線仍然使用默認顏色。 有小費嗎？

import {Divider } from "antd";

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

Answer 1

基本上將此添加到自定義 css 作品

.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

您需要使用ant-divider class 來覆蓋分隔器的顏色，它應該像

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

或者你可以像這樣使用它

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

請在此處查看工作示例演示

Answer 3

您可以將樣式應用於分隔符組件。 像borderLeft這樣的屬性應該可以正常工作。

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