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

2023年10月18日 283次阅读 来源: ivyzhang

空话不多话，来上车！

装置：

  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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞