Comment puis-je dessiner une ligne horizontale rouge dans React

Question

Comment puis-je dessiner une ligne horizontale (h) dans un composant React en utilisant la couleur dynamique?

Voici ce que j'ai jusqu'à présent:

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

Answer 1

Une façon de configurer le composant:

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

Et puis utilisez-le avec:

<ColoredLine color="red" />

Pour une ventilation complète sur la façon de styler <hr />, voir http://www.sovavsiti.cz/css/hr.html

Answer 2

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

Ajouter uniquement le borderColor, pour modifier le changement de couleur exact de <hr /> tag