JIYIK CN >

Draw a horizontal line in React:

1. Use <hr />the tag and set the style attribute on it.
2. Set the height of the line, and optionally set the background color and colour.

export default function App() {
  return (
    <div>
      {/* 👇️ colored horizontal line */}
      <hr
        style={{
          background: 'lime',
          color: 'lime',
          borderColor: 'lime',
          height: '3px',
        }}
      />

      {/* 👇️ colored horizontal line */}
      <div
        style={{
          background: 'lime',
          height: '3px',
        }}
      />

      {/* 👇️ basic horizontal line */}
      <hr />

      {/* 👇️ horizontal line with text */}
      <div
        style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}
      >
        <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} />

        <div>
          <p style={{width: '70px', textAlign: 'center'}}>Example</p>
        </div>

        <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} />
      </div>
    </div>
  );
}

The code example shows how to draw a horizontal line in React.

Note that <hr />the (horizontal rule) tag is self-closing.

<hr />The element represents a topic break between paragraph-level elements.

Like any other tag, we can set a style attribute to style the inline element.

<hr
  style={{
    background: 'lime',
    color: 'lime',
    borderColor: 'lime',
    height: '3px',
  }}
/>

请注意, we used two sets of curly braces when passing style attributes to the div element.

The outer set of curly braces marks the expression to be evaluated, and the inner set is an object of styles and values.

We can also draw a horizontal line with text in the middle.

<div
  style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}
>
  <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} />

  <div>
    <p style={{width: '70px', textAlign: 'center'}}>Example</p>
  </div>

  <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} />
</div>

Make sure to adjust the width of the element according to the width of the actual content p.