web-dev-qa-db-ja.com

Reactで赤い水平線を描くにはどうすればいいですか

動的な色を使用して反応コンポーネントに水平線（hr）を描画するにはどうすればよいですか？

ここに私が持っているものがあります：

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

コンポーネントをセットアップする1つの方法：

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

そして、それを以下で使用します：

<ColoredLine color="red" />

スタイル設定方法の詳細については、<hr />、 http://www.sovavsiti.cz/css/hr.html を参照

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

borderColorのみを追加して、<hr />タグの正確なフルカラー変更を変更します

1
Jojo Joseph