学习目标

  • 了解如何引入样式

实例一 (加载样式)

import React from 'react';
import ReactDOM from 'react-dom';

let exampleStyle = {
background: "skyblue",
borderBottom: "4px solid red"
}

let element = (
<div>
<h1 style={exampleStyle}>hello world.</h1>
</div>
)

ReactDOM.render(
element,
document.querySelector('#root')
)

React样式_css

实例二 (样式并连)

import React from 'react';
import ReactDOM from 'react-dom';
let classStr = "redBg"
let element = (
<div>
<h1 className={"abc " + classStr}>hello world.</h1>
</div>
)
ReactDOM.render(
element,
document.querySelector('#root')
)

React样式_css_02

实例三 (引入css文件)

import React from 'react';
import ReactDOM from 'react-dom';
import './test.css'
let classStr2 = ['abc2', 'redBg'].join(" ");
let element2 = (
<div>
<h1 className={classStr2}>hello world.</h1>
</div>
)
ReactDOM.render(
element2,
document.querySelector('#root')
)

test.css

.abc2 {
background-color: purple;
}
.redBg {
font-size: 16px;
font-weight: 700;
}

React样式_react_03

实例四 (注释)

let element2 = (
<div>
<!-- comment --> #错误注释
// comment ... #错误注释
/* comment */ #正确注释
<h1 className={classStr2}>hello world.</h1>
</div>
)

注释只能放在/* */里面

React样式小结

  • class中不能存在多个class属性
#错误表示

<div class='abc' class='edf' />
  • style样式中,如果存在多个单词组合,第二个单词开始,首字母大写(驼峰命名法)。或者用引号引起来,否则会报错。
  • 多个类共存(2种方式)
  • 注释(在表达式内书写)