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

s4n0splo  于 2023-09-28  发布在  React
关注(0)|答案(4)|浏览(150)

如何使用动态颜色在react组件中绘制水平线(hr)?
以下是我目前所掌握的:

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

w41d8nur1#

设置组件的一种方法:

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

然后使用它:

<ColoredLine color="red" />

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

w8f9ii69

w8f9ii692#

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

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

cotxawn7

cotxawn73#

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

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

alen0pnh4#

更新

下面是一个简单的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

相关问题