styled-components使用

styled-components

• 下载依赖

  npm i styled-components
  

• 基本用法

  import React, { Component } from "react";
  import styled from 'styled-components'
  export default class App 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{
                  list-style: none;
                  display: flex;   
                  li{
                      flex: 1;
                      &:hover{
                          background: red
                      }
                  }
              }
          `
  
          return (
              <StyledFooter>
                  <ul>
                  <li>首页</li>
                  <li>列表</li>
                  <li>我的</li>
                  </ul>
              </StyledFooter>
          );
      }
  }
  

• 透传props，根据props做样式判断

  import React, { Component } from "react";
  import styled from "styled-components";
  export default class App extends Component {
      render() {
          //透传props 
          const StyledInput = styled.input`
              outline: none;
              border-radius: 10px;
              border-bottom: 1px solid red;
          `;
          //根据props做样式判断
          const StyledDiv = styled.div`
              background: ${(props) => props.bg || "blue"};
              width: 100%;
              height: 100px;
          `;
          return (
          <div>
              App
              <StyledInput type="text" placeholder="输入"/>
              <StyledDiv  bg="yellow" ></StyledDiv>
          </div>
          );
      }
  }
  

• 样式扩展 类似继承

  import React, { Component } from "react";
  import styled from "styled-components";
  
  export default class App extends Component {
      render() {
          const StyledButton = styled.button`
              width: 100px;
              height: 100px;
              background: yellow;
          `;
          const StyledButton2 = styled(StyledButton)`
              background: red;
          `;
          const StyledButton3 = styled(StyledButton)`
              background: blue;
          `;
  
          return (
              <div>
                  App
                  <StyledButton>111</StyledButton>
                  <StyledButton2>222</StyledButton2>
                  <StyledButton3>222</StyledButton3>
              </div>
          );
      }
  }
  

• 加动画

  import React, { Component } from "react";
  import styled, { keyframes } from "styled-components";
  
  export default class App extends Component {
      render() {
          const myanimation = keyframes`
              from {
                  transform: rotate(0deg);
              }
              to {
                  transform: rotate(360deg);
              }
          `;
  
          const StyledDiv = styled.div`
              width: 100px;
              height: 100px;
              background: yellow;
              animation: ${myanimation} 1s linear infinite;
          `;
          return (
              <div>
                  <StyledDiv />
              </div>
          );
      }
  }