react手机机端css_React三种应用CSS方式

React两种使用CSS方法 一、在档案中写写css的第一个作法 Header.js import React from "react"; class Header extends...

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 (

主页

关于我

联系方法

登陆

);

}

}

export default Header;

二、在档案资料中写一篇css的第二个做法

Header.js

import React from "react";

class Header extends React.Component {

render() {

return (

Home

关于我

联系方法

登陆

);

}

}

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 (

主页

关于我

联系方法

登陆

);

}

}

export default Header;

Header.css

.header1{

background-color: #ff5506;

height: 25px;

}

.start{ width: 30% ;

float:left;

}

.end{width: 20% ;

float: right;

}