CODEWITHSUNDEEP
htmlcssreactjs
Shashika Virajh
Shashika Virajh

Reputation: 9457

React <hr /> with dynamically set colors

I want to have a <hr /> in my react application. I want to change the color of it in different places? Is there any way of doing it? If we use a functional component to achieve this, how should be do it?

Upvotes: 2

Views: 7365

Answers (3)

Neelam
Neelam

Reputation: 174

you need to set with below css for that :

    hr {
        background-color: red; //or whatever color you want.
        height: 1px;
    }

Upvotes: 0

AKX
AKX

Reputation: 168841

There's nothing special to it really.

const Rule = ({ color }) => (
  <hr
    style={{
      borderColor: color,
    }}
  />
);

const App = () => (
  <div>
    Here's an orange rule. <Rule color="orange" />
    Here's a blue rule. <Rule color="blue" />
  </div>
);

ReactDOM.render(<App />, document.querySelector("main"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main/>

Upvotes: 4

dmanexe
dmanexe

Reputation: 1044

The <hr> element, from my experience, if you're leaving it unstyled beyond a color, is best styled through the CSS rule border-color, as in the following example:

.foo { border-color: black; }
<hr class="foo" />

As for React, you could start with their basic CSS prop and expand it from there.

render() {
  let className = 'hr-color';
  if (this.props.isActive) {
    className += ' foo';
  }
  return <hr className={className}/>
}

Upvotes: 0

Related Questions