React三种使用CSS方法

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