如何在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

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

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

Answer 3

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

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