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.style1}>

			<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 = 'header1'>

			<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;
}