【React】スタイルの指定

1.クラス名でスタイルを指定

.textBlue{
	color: blue;
}

<h1 className="textBlue">1.クラス名でスタイルを指定</h1>

2.直接スタイルを指定

<h1 style={{ color: "orange" }}>2.直接スタイルを指定</h1>

3.変数でスタイルを指定

var textGreen = {
     color: "green"
   };

<h1 style={ textGreen }>3.変数でスタイルを指定</h1>

4.インラインスタイル：単一指定

<h1 style={Object.assign({}, styles.textRed, styles.fontSize50)}>
    5.インラインスタイル
	<br/>スタイル複数指定
</h1>

const styles = {
   textRed: {
       color: 'red'
   }
};

5.インラインスタイル：複数指定

<h1 style={Object.assign({}, styles.textRed, styles.fontSize50)}>
	5.インラインスタイル
	<br/>スタイル複数指定
</h1>

const styles = {
   textRed: {
       color: 'red'
   },
	fontSize50: {
		fontSize: 50,
		background: 'blue'
	}
};

App.js

const { Component } = React;

function App() {
	// 3.変数でスタイルを指定
	var textGreen = {
     color: "green"
   };
	return (
		<div>
			<h1 className="textBlue">1.クラス名でスタイルを指定</h1>
		
			<h1 style={{ color: "orange" }}>2.直接スタイルを指定</h1>

			<h1 style={ textGreen }>3.変数でスタイルを指定</h1>

			<h1 style={styles.textRed}>
				4.インラインスタイル
				<br/>スタイル一つ指定
			</h1>

			<h1 style={Object.assign({}, styles.textRed, styles.fontSize50)}>
				5.インラインスタイル
				<br/>スタイル複数指定
			</h1>
		</div>
	);
}

// 2.インラインスタイル
const styles = {
   textRed: {
       color: 'red'
   },
	fontSize50: {
		fontSize: 50,
		background: 'blue'
	}
};

ReactDOM.render(<App />, document.querySelector(".container"));

style.css

.textBlue{
	color: blue;
}