Css模块化

Css

Css组件

安装 styled-components

npm i styled-components -S

Css组件的使用

import { Component } from 'react'
import styled from 'styled-components'  // 引入styled-components组件

export default class Test extends Component {
  render() {
  // 创建集成css的组件
  // 组件名 = styled.标签名` css样式 `
    const StyleFooter = styled.footer`
      background-color:yellow;
      width:100px;
      height:100px;
    `
    return (
      <StyleFooter></StyleFooter>
    )
  }
}

props的透传

import { Component } from 'react'
import styled from 'styled-components'

export default class Test extends Component {
  render() {
    const StyleInput = styled.input`
      width:100px;
      height:10px;
    `
    return (
    
    // 在封装input的高阶组件中传入input本身具有的属性 会作用到标签上
      <StyleInput type='password' placeholder='请输入'></StyleInput>
    )
  }
}

基于props的业务逻辑

import { Component } from 'react'
import styled from 'styled-components'

export default class Test extends Component {
  render() {
  // 模板字符串中用${}引入变量 其中接收一个函数 函数的参数为传入的props 
    const StyleInput = styled.input`
      width:100px;
      height:10px;
      background-color:${props=>props.bg||'blue'}
    `
    return (
      <StyleInput type='password' placeholder='请输入' bg='yellow'></StyleInput>
    )
  }
}

样式化任意组件

一定要写className

import { Component } from 'react'
import styled from 'styled-components'

// 创建Child组件 并必须在跟标签添加className -> props.className
const Child = (props) => <div className={props.className}>child <span>123</span></div>

// 使用styled高阶组件进行封装 同时集成css
// 且内部支持scss语法
const StyledChild = styled(Child)`
  background:red;
  height:100px;
  span{
    display:block;
    width:50px;
    height:50px;
    background:yellow
  }
`

export default class Test extends Component {
  render() {
    return (
      <StyledChild></StyledChild>
    )
  }
}

扩展样式

集成组件的样式并拓展

const MyButton = styled.button`
  background:yellow;
`
const BigButton = styled(MyButton)`
  height:100px;
  width:100px;
`

动画

import { Component } from 'react'
import styled, { keyframes } from 'styled-components'

export default class Test extends Component {
  render () {
  
  // 定义关键帧动画
    const rotate360 = keyframes`
      from {
        transform: rotate(0deg);
      }
      to{
        transform:rotate(360deg);
      }
    `
    
    const StyleInput = styled.input`
      width:100px;
      height:10px;
      animation:${rotate360} 1s linear infinite
    `
    return (
      <StyleInput></StyleInput>
    )
  }
}

Css Modules

css modules 通过对css类名的重命名，保证每一个类名的唯一性，从而避免样式冲突问题

实现方式：webpack的css-loader插件

在react脚手架中演化成：文件名，类名，hash（随机）三部分，只需要指定类名即可。

1.在index.module,css中写一个类名

.red{

}

2.通过css modules就会转化成类名

.Button_error_axy4s

Css Modules 的使用

1.首先创建一个名为index.module.css的样式文件

这是react中约定的，与普通css区分开

在要使用的文件中创建样式文件名称

index.module.css

2.在组件中导入样式文件

在要使用的文件在中进行引入

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

3.通过styles对象访问对象中的样式名来设置样式

<div className={styles.类名}></div>

注：

在写项目的时候，避免不了使用ui组件，想改变全局样式，需要通过:global()来进行设置

因为设置的类名已经发生改变，所以在改变组件中的样式时要使用组件中提供的类名

:global（.am-navbar-title）{
color:#333;
}
.map{
    padding-top: 45px;
    height: 100%;
}
.container{
    height: 100%;
}
/*在全局样式前面可以加上属于哪个类名之下，这样可以提高权重，避免覆盖组件类名的样式*/


.map :global(.am-navbar){
    margin-top: -45px;
}