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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/48156902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 04:02:10  来源:igfitidea点击:

How can I draw red horizontal line in React

javascripthtmlreactjscolors

提问by sleatrou

How can I draw a horizontal line (hr) in a react component using dynamic color?

如何使用动态颜色在反应组件中绘制水平线(hr)?

Here's what I have so far:

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

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

回答by Luke

One way to set up the component:

设置组件的一种方法:

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

And then use it with:

然后将其用于:

<ColoredLine color="red" />

For a full breakdown on how to style <hr />, see http://www.sovavsiti.cz/css/hr.html

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

回答by Jojo Joseph

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

Only adding the borderColor, to change the exact full-color change of <hr />tag

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