React的样式3种写法

React的样式写法

1.style内联

render() {
	const style = { color: 'red' }
	return (
		<div>
			<p style={ {color: 'red' } }></p>
			//或者是
			<p style={ style }></p>
		</div>
	)
}

2.引用外联样式表

import './index.css'

render(){
	return (
		<div>
			<p clasName= "div"></p>
		</div>
	)
}

.div {
	color: red;
}

3.引用第三方库

（1）classNames (className很少人用，推荐使用classNames )

npm install classnames --save

import classNames from ' classnames ';
  
render() {
	return (
		<div>
			<p clasName= { 
				classNames (//classNames 的作用控制 css的样式显示 与 隐藏
					{ 
						//div div2是index，css的类名