react使用styled-components

一、styled-components

1.1 安装使用

styled-components它是通过javascript改变css编写方式的解决方案之一，从根本上解决常规css编写的一些弊端。
通过javascript来为css赋能，能达到常规css所不好处理的逻辑复杂、函数方法、复用、避免干扰。样式书写将直接依附在jsx上面，html、css、js三者再次内聚。all is js思想。

运行安装命令npm i styled-components

在项目中创建文件夹styled-components及其子文件StyleComponent.js，并在index.js引入：

在StyleComponent.js写入代码：

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

export default class StyleComponent extends Component {
  render() {

    const StyledFooter = styled.footer`
        background:yellow;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        ul {
            display: flex;
            list-style-type: none;
            li {
                flex: 1;
            }
        }
    `

    return (
      <StyledFooter>
          <ul>
              <li>首页</li>
              <li>列表</li>
              <li>我的</li>
          </ul>
      </StyledFooter>
    )
  }
}

效果：

可以看到我们引入的styled就是一个组件.footer将会生成footer标签并用模版字符串进行样式写法，支持像sass的嵌套写法

---

1.2 基于props做样式判断

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

export default class StyleComponent extends Component {
  render() {

    const StyledButton = styled.button`
    background: ${props=>props.bg || 'blue'}
    
    `

    return (
      <div>
        <StyledButton>btn</StyledButton>
        <StyledButton bg="yellow">btn</StyledButton>
      </div>
    )
  }
}

效果：

---

1.3 样式化任意组件

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

export default class StyleComponent extends Component {
  render() {

    const Child = (props) => <div className={props.className}>child</div>

    const StyledChild = styled(Child)`
    background: ${props=>props.bg || 'blue'};
    color: #fff;
    `

    return (
      <div>
        <StyledChild>btn</StyledChild>
      </div>
    )
  }
}

---

1.4 动画

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

export default class StyleComponent extends Component {
  render() {

    const rotate360 = keyframes`
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    `
    const Rotate = styled.div`
    position: absolute;
    left: 50px;
    top: 100px;
    background: blue;
    width: 100px;
    height: 100px;
    animation: ${rotate360} 1s linear infinite;
    `

    return (
      <div>
        <Rotate></Rotate>
      </div>
    )
  }
}

效果：

可以看到我们引入了keyframes，进行了动画编写。

在学习React的路上。如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。