[JavaScript知识库]React中使用css

内联样式

联样式是官方推荐的一种css样式的写法：

1. style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串；
2. 并且可以引用state中的状态来设置相关的样式

问题：
（1）写法上都需要使用驼峰标识
（2）某些样式无法编写(比如伪类/伪元素)

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    const pStyle = {
      color: this.state.color,
      textDecoration: "underline"
    }
    return (
      <div>
        <h2 style={{fontSize: "50px", color: this.state.color}}>我是标题</h2>
        <p style={pStyle}>我是一段文字描述</p>
      </div>
    )
  }
}

普通的css

1. 普通的css我们通常会编写到一个单独的文件，之后再进行引入

问题：
（1）普通的css都属于全局的css，样式之间会相互影响，会被层叠掉

import './style.css';
export default class App extends PureComponent {
  render() {
    return (
      <div id="app">
        <span>App</span>
        <h2 className="title">我是App的title</h2>
      </div>
    )
  }
}

.
css modules

React的脚手架已经内置了css modules的配置解决局部作用域的问题

1. .css/.less/.scss 等样式文件都修改成
2. xxx.module.less
3. xxx.module.css
4. xxx.module.scss 之后就可以引用并且进行使用了

问题
（1）引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的
（2）所有的className都必须使用{style.className} 的形式来编写
（3）不方便动态来修改某些样式，依然需要使用内联样式的方式

#app  .title {
  color: blue;
}

import appStyle from './style.module.css';
export default class App extends PureComponent {
  render() {
    return (
      <div id="app">
        App
        <h2 className={appStyle.title}>我是App的title</h2>
      </div>
    )
  }
}

CSS in JS 由第三方库提供

“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义

目前比较流行的CSS-in-JS的库

1. styled-components 最流行 安装 npm i styled-components
2. emotion
3. glamorous

styled-components

styled-components的本质是通过函数的调用，最终创建出一个组件:

1. 这个组件会被自动添加上一个不重复的class
2. styled-components会给该class添加相关的样式
3. 支持直接子代选择器或后代选择器，并且直接编写样式
4. 支持样式的继承

/**
 * 特点:
 *  1.props穿透  获取props需要通过${}传入一个插值函数，props会作为该函数的参数
 *  2.attrs的使用  可以通过attrs给标签绑定属性
 *  3.传入state作为props属性  可以获取到标签上和attrs配置对象上的属性
 */
import styled from 'styled-components'
import { HomeWrapper } from "./style"
const myInput = styled.input.attrs({
  placeholder: "coderwhy",
  bColor: "red"
})`
  background-color: lightblue;
  border-color: ${props => props.bColor};
  color: ${props => props.color};
`
const testInput = styled(myInput)`
	color: #fff;
  	background-color: green;
`
export default class Profile extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    return (
      <div>
        <input type="password"/>
        <HYInput type="password" color={this.state.color}/>
      </div>
    )
  }
}

style.js 文件

import styled from 'styled-components';
// 可以导出多个
export const HomeWrapper = styled.div`
  font-size: 12px;
  color: red;
  .banner {
    background-color: blue;
    span {
      color: #fff;
      &.active {
        color: red;
      }
      &::after {
        content: "aaa"
      }
    }
  }
`