从零到一 styled-components 4.x 的使用

废话不多话,来上车!

安装:

  npm install --save styled-components   (或者 yarn add styled-components)

简述使用:

1、 创建全局的样式:

首先创建一个JS文件,例如style.js
①:import { createGlobalStyle } from ‘styled-components’ // 引全局包
②:export const GlobalStyle = createGlobalStylemargin:0// “里面为项目需要的css内容
③:在react组件内 把引入的 GlobalStyle 当做标签写入

     class App extends Component {
        render() {
            return ( <GlobalStyle></GlobalStyle> );
        }
      }
    

创建一个局部的样式

①:import styled from ‘styled-components’; // 引局部包
②:export const HeaderWrapper = styled.div //里面为项目需要的css内容
③:在react组件内 把引入的 HeaderWrapper 当做标签写入

   
      class App extends Component {
        render() {
            return ( <HeaderWrapper></HeaderWrapper> );
        }
      }
   

3、类嵌套:(类似于less sass用法大同小异)

列举个项目实例:

  export const SearchWrapper = styled.div`
    position:relative;
    float:left;
    .iconfont{
        position:absolute;
    }`;

4、增加属性写法:

     举例给A标签增加attrs属性:
     
     export const Logo = styled.a.attrs({
          href:'/'
     })`   

5、 设置当前元素内指定的class类

        &.left{
            float:left;
        }
        &::placeholder{
            color:#999;
        }

6、 styled-components 传值写法:

        样式内js文件用props去接收
        
        export const RecommendItem = styled.div`
            background: url(${(props) => props.imgUrl});
        `;
        
        react组件内给样式JS文件传入需要的地址
        
        <RecommendItem imgUrl="http://xxxxx"/>

7、常见小坑:

 
    引图片不要直接写行内样式,默认会转化为字符串,导致加载图片失败,可用如下方式:
    
    import logoPic from '../../statics/logo.png';
    export const Logo = styled.a`
        background:url(${logoPic});
    `;

整理不易,喜欢的话就顺手点个赞吧,您的赞会是我们继续分享的动力 !

    原文作者:ivyzhang
    原文地址: https://segmentfault.com/a/1190000017933382
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞