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

Yuqi 发布于2019-08-23 14:47 / 2421人阅读

摘要：废话不多话，来上车安装或者简述使用创建全局的样式首先创建一个文件，例如引全局包里面为项目需要的内容在组件内把引入的当做标签写入创建一个局部的样式引局部包里面为项目需要的内容在组件内把引入的当做标签写入类嵌套类似于用法大同小异列举

废话不多话，来上车！

安装：

  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 (  );
        }
      }

创建一个局部的样式

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

   
      class App extends Component {
        render() {
            return (  );
        }
      }

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文件传入需要的地址

7、常见小坑：

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

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

GPU云服务器云服务器零到一 styled-components 零到有从零开始的邮件服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101141.html

从零到一，新建webpack工程

摘要：指定启用例如上述代码，就使用和处理了除了以外的。设置当前的为，同样这个配置也可以写在中。设置目录删除注释去除空格去除属性引号复制静态目录将所以可能被请求的静态文件，分别放在目录下。结语本次从零到一，新建了一个脚手架。 react-sample-javascript 为了实现一个可定制化高的react工程，我们往往会自己搭建一个react工程。所以本文会从零开始搭建一个react脚手架工...

Code4App 2019-08-26 12:08 评论0 收藏0
从零到一：用Phaser.js写意地开发小游戏（Chapter 5 - 游戏大功告成）

摘要：回顾上一节我们完成了游戏核心场景的大部分工作，能操控主角，能随机掉落苹果了。于是我们修改之前的方法，也就是接到苹果后的方法。接到炸弹后结束和苹果掉地上的调用方式是一样的。 showImg(https://segmentfault.com/img/bVNawu?w=900&h=500); 回顾上一节我们完成了游戏核心场景play的大部分工作，能操控主角，能随机掉落苹果了。那么这一节我们...

Jeff 2019-08-22 11:03 评论0 收藏0