react中樣式的使用(內聯和外部樣式表)

2021-10-02 13:54:06 字數 1231 閱讀 9585

1:在src中新建三個子元件分別為 header    footer   content

2:在裡面分別寫入**  建議用rcc快捷方式

header.js中**如下

import react,  from 'react'

var headerstyle =

export default class header extends component

}

content中**如下

import react,  from 'react'

export default class content extends component

}

footer中**如下

import react,  from 'react'

import "./footer.css";

export default class footer extends component

}

3:在同級寫乙個footer.css

在footer.css中寫入**如下

.foo
4:在index.js中使用三個元件

import  react, from "react";

import reactdom from "react-dom";

import header from "./header";

import content from "./content";

import footer from "./footer";

render()

}

5:style的注意事項

6:css的注意事項

寫完執行  就可以看到頭部是紅色字型  底部是紫色字型

04react中樣式的使用 內聯和外部樣式表

1 在src中新建了三個子元件分別為header content footer 2 在裡面分別寫入 建議用rcc快捷方式 header.js中 import react,from react var headerstyle export default class header extends co...

JS 操作樣式表3 內聯和外鏈樣式

var box document.getelementbyid box box.style.屬性 只能讀取修改行內樣式。訪問元素樣式2,對外鏈樣式表進行操作 document.stylesheets 得到的是樣式表集合 stylesheetlist var sheet document.styles...

react常見的樣式的使用

在css檔案中寫入樣式.title 在元件中引入import style.css 使用classname title h2h2 2.引入styled 定義import styled from styled components const myh1 styled.h1 font size 88px ...