如何在React中绘制红色水平线

Question

如何使用动态颜色在反应组件中绘制水平线（hr）？

这是我到目前为止所拥有的：

render {
    let color = 'red';
    return (
        <div> 
            There is a red HR
           <hr />
        <div>
    )
}

Answer 1

设置组件的一种方法：

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

然后将其用于：

<ColoredLine color="red" />

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

Answer 2

这是在 React js 应用程序中创建水平线的简单方法

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

Answer 3

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

仅添加borderColor，才能更改<hr />标签的确切全色更改