React的样式3种写法

React的样式写法

1.style内联

render() {
	const style = { color: 'red' }
	return (
		

			

			//或者是
			

		
	)
}

2.引用外联样式表

import './index.css'

render(){
	return (
		

			

		
	)
}

.div {
	color: red;
}

3.引用第三方库

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

npm install classnames --save

import classNames from ' classnames ';
  
render() {
	return (
		

			

		
	)
}

（2）styled-components（组件 => 样式）

npm install styled-components --save

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;//使用模板字符串

render() {
	return (
		

			//首字母大写
			
		
	)
}