Reactにおけるstyle属性でのCSSスタイルの操作

これまでのレッスンでは、style属性に CSSスタイルを持つオブジェクトを含む変数を渡していました。中間変数を使用せずに、属性内に直接オブジェクトを記述することもできます。この場合、二重の中括弧が必要です - 一つ目はJSXの挿入用、二つ目はオブジェクト用です。

では、CSSスタイルのないコンポーネントを取り上げましょう：

function App() {
	return (
		<div>
			<p>テキスト</p>
			<p>テキスト</p>
			<p>テキスト</p>
		</div>
	);
}

例として、Reactコンポーネント App の最初の段落に直接CSSプロパティを指定してみましょう：

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	テキスト
</p>

同様の方法で、残りのタグにもスタイルを追加します。

結果として、コンポーネントのコードは次のようになります：

function App() {
	return (
		<div style = {{
			width: '200px',
			border: '2px solid brown',
			padding: '10px',
			textAlign: 'center' }}>
			<p style={{
				color: 'orangered',
				fontWeight: 'bold' }}>
				テキスト
			</p>
			<p style = {{
				fontStyle: 'brown',
				color: 'brown' }}>
				テキスト
			</p>
			<p style = {{
				backgroundColor: 'orange',
				fontWeight: 'bold',
				color: 'white' }}>
				テキスト
			</p>
		</div>
	);
}

前回のレッスンの課題で作成した Reactコンポーネントを用意してください。このレッスンで示したように、各タグの style属性に直接スタイルを追加してください。