React样式

学习目标

• 了解如何引入样式

实例一 （加载样式）

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')
)

实例二 （样式并连）

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')
)

实例三 （引入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;
}

实例四 （注释）

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

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

React样式小结

• class中不能存在多个class属性

#错误表示

<div class='abc' class='edf' />

• style样式中，如果存在多个单词组合，第二个单词开始，首字母大写（驼峰命名法）。或者用引号引起来，否则会报错。

• 多个类共存（2种方式）

• 注释（在表达式内书写）