设置组件的一种方法：

const ColoredLine = ({ color }) => (
    <hr
        style={{
            color: color,
            backgroundColor: color,
            height: 5
        }}
    />
);

然后使用它：

<ColoredLine color="red" />

有关如何设置<hr />样式的完整详细信息，请参见http://www.sovavsiti.cz/css/hr.html

<hr  style={{
    color: '#000000',
    backgroundColor: '#000000',
    height: .5,
    borderColor : '#000000'
}}/>

仅添加borderColor，以更改<hr />标记的确切全色更改

这里有一个在React JS应用程序中创建水平线的简单方法

<div style={{ borderTop: "2px solid #fff ", marginLeft: 20, marginRight: 20 }}></div>

更新

下面是一个简单的CSS样式的水平线的代码。

.separator {
  height: 10px;
  background-color: red;
  border: none;
}

<hr class="separator" />

使用<hr />标记后注意到的要点
1.从样式传递color对<hr />没有影响。使用background-color更改hr的样式颜色。

1. background-color仅在提到height时才起作用
   1.建议使用border: none，因为hr附带默认边框1px

React组件

function Separator({ color = "black", height = 1 }) {
  return (
    <hr
      style={{
        backgroundColor: color,
        height: height,
        border: "none"
      }}
    />
  );
}

<Separator color="red" height="10px" />

重点
1.我建议使用外部样式而不是内联样式（除非是TailWindCSS）
1.您需要将color默认为black，将height默认为1。这些是默认的<hr />样式（不包括边框），如果没有默认设置，如果缺少color, height中的一个，您将看不到水平线
MDN Docs