Roy G Biv

October 11, 2021

Today’s little experiment passes background-color from parent to child in React. Simple enough, although the double bracket syntax for defining styles in JSX is weird. There’s not much to this, just a random idea. Neither white nor black text was legible in every square, so I used ‘-webkit-text-stroke’ in CSS for an outline. Remember: white text with a black outline is easy to read against any background! Here’s the JS: 

const Block = ({val, color}) => {
	return (
		<div className="color_block" style={{backgroundColor: color}}>{val}</div>
	)
}

const Rainbow = () => {
	return (
		<div id='rainbow'>
			<Block val='R' color='#ff0000'/>
			<Block val='O' color='#ff7700'/>
			<Block val='Y' color='#ffff00'/>
			<Block val='G' color='#00cc00'/>
			<Block val='B' color='#0077cc'/>
			<Block val='I' color='#5500aa'/>
			<Block val='V' color='#770077'/>
		</div>
	)
}

ReactDOM.render(
	<Rainbow />,
	document.getElementById('roygbiv')
)

tags:
react
ui