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

Question

如何在React组件中绘制一条带有动态颜色的水平线（hr）？

这是我目前拥有的内容：

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

- sleatrou

---

@Phiter 这段代码不起作用。 - sleatrou

Answer 1

设置组件的一种方法：

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

然后使用它：

<ColoredLine color="red" />

如何对<hr />进行样式设置的详细说明，请参见http://www.sovavsiti.cz/css/hr.html

- Luke Willis

---

您可以添加示例用法，同时显示传递的属性。 - eltonkamami

Answer 2

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

只需添加borderColor属性即可更改<hr />标签的精确全色变化。

- Jojo Joseph

Answer 3

以下是在React JS应用程序中创建横线的简单方法

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

- Aman Saxena

Answer 4

更新

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

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

<hr class="separator" />

在使用<hr />标签后，我注意到的关键点：

1. 通过样式传递color对<hr />没有影响。使用background-color来改变hr的颜色。
2. 只有在指定了height时，background-color才起作用。
3. 建议使用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）
2. 你需要将color默认为black，将height默认为1。这些是默认的<hr />样式，不包括边框，如果没有默认值，如果color或height之一缺失，你将看不到水平线。

MDN文档

- Anjan Talatam