React三種使用CSS方法

一、在檔案中寫寫css的第一個作法

Header.js

import React from "react";

class Header extends React.Component {
style1 = {
background: 'red',
height: '25px'
};
style2 = {
width: '80%' ,
float:'left'
};
style3 = {
width: '20%' ,
float: 'right'
};

render() {
return (

		<div style = {this.style2}>
		<a href="/">首頁</a>
		</div>

		<div style = {this.style3}>
			<a href='/'>關於我們</a>  
			<a href='/'>聯絡方式</a>   
			<a href='/'>登入 </a>
		</div>
	</div>
);

}
}

export default Header;

二、在檔案中寫寫css的第二個作法
Header.js

import React from "react";

class Header extends React.Component {

render() {
return (
<div style={{background: 'red',height: '25px'}}>

		<div style = {{ width: '80%' ,float:'left'}}>
		<a href="/">Home</a>
		</div>

		<div style = {{ width: '20%' ,float: 'right'}}>
			<a href='/'>關於我們</a>  
			<a href='/'>聯絡方式</a>   
			<a href='/'>登入 </a>
		</div>
	</div>
);

}
}

export default Header;
三、外部引入 .css 檔,將css獨立到Header.css
1.先加上class,但在jsx中是加上classname
2.開一個「同名檔案.css」
3.將cs移植到css檔案中
4.在該js中import該css
5.若要所有的檔案都共同使用該css就在Index.js中import就行了。
6.放入css中的內容會與在檔案中的css的寫法會有不同。

import React from "react";
import './Header.css';

class Header extends React.Component {

render() {
return (

		<div className ='start'>
		<a href="/">首頁</a>
		</div>

		<div className ='end'>
			<a href='/'>關於我們</a>  
			<a href='/'>聯絡方式</a>   
			<a href='/'>登入 </a>
		</div>
	</div>
);

}
}

export default Header;
Header.css

.header1{
background-color: #ff5506;
height: 25px;
}

.start{ width: 30% ;
float:left;
}

.end{width: 20% ;
float: right;
}