React - 3 样式

1 行内样式

class App extends Component{
  render () {
    return <div style={ {
      width: '200px', // string
      height: 200, // number
      backgroundColor: '#f66', // 驼峰式 写成短横线式可能也能正常运行，但控制台会报错
      fontSize: 50
    } }>行内样式</div>
  }
} 

2 使用外联样式

编写css文件，将css文件引入，用className来控制样式

/* app.css */
.active {
    height: 100px;
    width: 100px;
    background-color: #bfc;
}

//index.js
import './app.css'

class App extends Component{
  render () {
    return <div className="active">外联样式（class样式）</div>
  }
} 

3 不同条件添加不同的样式

下载并使用classnames包

npm i classnames -S

.btn {
    height: 100px;
    width: 100px;
}
.btn-success {
    background-color: #0f0;
}
.btn-danger {
    background-color: #f66;
}

import classnames from 'classnames'

class App extends Component{
  state = { // 初始化状态
    flag: false
  }
 
  render () {
    const style = classnames({
      'btn': true,
      'btn-success': this.state.flag,
      'btn-danger': !this.state.flag
    })
    return <button className = { style } onClick = {() => {
      this.setState({
        flag: !this.state.flag
      })
    }}>成功按钮</button>
  }
} 

4 css-in-js

在js中写css代码

需要用到styled-components

npm i styled-components -S

import styled from 'styled-components'


// 首字母必须大写
const Button = styled.button`
  width: 400px;
  height: 30px;
  border-radius: 15px;
`
//styled后跟的属性表示该元素是那种html元素，Button仅仅只是该元素的名字不具有实际用处，
//例如此处使用styled.span,该元素就会被渲染成一个span元素
class App extends Component{
  render () {
    return <Button>css-in-js</Button>
  }
} 

5 css的局部作用域

书写一个外联css文件

/* App.module.css */
.active {
    background-color: #bfc;
}

//index.js
import styles from  './App.module.css'

export default class App extends Component {
  render() {
    return (
      <div className={ styles.active }>
        css局部样式
      </div>
    )
  }
}

!!! 注意css文件后缀名必须是module.css

.......更新中