styled-components入门基础知识_针对React写的一套css in js框架

styled-components入门基础知识

官方网址:https://styled-components.com react css-in-js styled-components css

styled-components入门基础知识_针对React写的一套css in js框架

GitHub:https://github.com/styled-components/styled-components

简介描述:针对React写的一套css in js框架

style-components是针对React写的一套css in js框架,简单来讲就是在js中写css。相对于与预处理器(sass、less)的好处是,css in js使用的是js语法,不用重新再学习新技术,也不会多一道编译步骤。无疑会加快网页速度。如果有sass或less的开发经验,几分钟就可以学会style-components。  

styled-components与React(针对web)和React Native兼容。

 

安装

npm install styled-components@beta

例子

import React from 'react';

import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use them like any other React component – except they're styled!
<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

海计划公众号
(0)
上一篇 2020/03/06 09:14
下一篇 2020/03/06 09:13

您可能感兴趣的内容

  • 使用 webpack 插件自动生成 vue 路由文件入门教程_路由小白攻略

    一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间。从长远来看,使用插件自动生成路由是具有一定好处的。当项目中的路由配置非常多的时候,为了区分业务,你可能需要分成许多个文件来存放这些路由文件,这样就不

    2020/03/29
  • Android H5秒开方案调研—今日头条H5秒开方案详解使用说明_h5基础知识教程

    背景在回家的地铁上使用自家应用H5相关功能时,可能由于网络原因导致体验较差,在使用微信、今日头条App时,感觉很流畅,基本做到了秒开,然后就想了解下业内H5秒开方案。问题原因文件下载耗时:包括html、css、js、图片等页面渲染耗时:页面渲染,解析js、css文件等WebView创建耗时:首次创建WebView耗时大约需要500ms左右,第二次创建耗时大约

    2020/03/29
  • 使用Vue 自定义文件选择器组件菜鸟知识_组件小白知识

    使用Vue 自定义文件选择器组件菜鸟知识 文件选择元素是web上最难看的 input 类型之一。它们在每个浏览器中实现的方式不同,而且通常非常难看。这里有一个解…

    2020/03/19
  • HTTP 协议的 8 种请求类型介绍使用指南_协议基础知识入门

    HTTP 协议中共定义了八种方法或者叫“动作”来表明对 Request-URI 指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送’*’的请求来测试服务器的功能性。 HEAD:向服务器索要与GET请求相一致的响应,只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的

    2020/03/20
  • React中常被问到的面试题教程视频_面试入门教程

    什么是 JSX要了解 JSX,首先先了解什么三个主要问题,什么事 VDOM,差异更新和 JSX 建模:VDOM,也叫虚拟 DOM,它是仅存于内存中的 DOM,因为还未展示到页面中,所以称为 VDOMvar vdom = document.createElement(“div”);上面这一句就是最简单的虚拟 DOMvar vdom = document.cre

    2020/03/24
  • PingWest品玩小白常识有品好玩的科技,一切与你有关

    PingWest品玩使用攻略 官方网址:http://www.pingwest.com/ 简介描述:有品好玩的科技,一切与你有关

    2020/03/06
  • 用Cordova打包Vue项目入门教程_Cordova小白帮助

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目:第一步:安装cordova,创建好cordova项目。第二

    2020/03/31
  • ES6中的代理(Proxy)和反射(Reflection)新手入门_代理小白基础

    代理和反射的定义调用 new Proxy() 可常见代替其它目标 (target) 对象的代理,它虚拟化了目标,所以二者看起来功能一致。代理可拦截JS引擎内部目标的底层对象操作,这些底层操作被拦截后会触发响应特定操作的陷阱函数。反射 API 以 Reflect 对象的形式出现,对象中方法的默认特性与相同的底层操作一致,而代理可以覆写这种操作,每一个代理陷阱对

    2020/03/30
  • Rocket菜鸟攻略_一个rust的web框架

    Rocket菜鸟攻略 官方网址:https://rocket.rs GitHub:https://github.com/SergioBenitez/Rocket 简介描述:一个ru…

    2020/03/06
  • javascript如何判断值是否是数字?入门攻略_数字菜鸟教程网

    javascript如何判断一个值是否是数字?下面本篇文章就来给大家介绍一下使用javascript判断一个值是否是数字的方法。方法1:使用js自带的全局函数isNaN()isNaN() 函数用于检查其参数是否是非数字值。如果 值x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true;如果 值x 是其他值,则返回 false。示例:<

    2020/03/22
  • js中addEventListener事件监听器参数详解入门知识_事件菜鸟教程网

    我们都知道addEventListener() 的参数约定是这样的:addEventListener(type, listener[, useCapture ])useCapture是可选参数,默认值为false,它代表:控制监听器是在捕获阶段执行还是在冒泡阶段执行,通常我们都没传递第三个参数(传 true 的情况太少了)。目前DOM 规范做了修订:addE

    2020/04/05
  • Js数据类型转换小白入门JavaScript 那些不经意间发生的数据类型自动转换_数据使用攻略

    JavaScript可以自由的进行数据类型转换,也提供了多种显式转换的方式。但是更多的情况下,是由JavaScript自动转换的,当然这些转换遵循着一定的规则,了解数据类型自由转换的规则是非常必要的。再次翻阅犀牛书后有了一些总结,与大家分享,有不严谨地方,望指正!数据类型聊到数据类型转换,就不得不提到JavaScript的数据类型:原始类型(Number ,

    2020/04/05
  • 前端防抖和节流小白基础_节流使用帮助

    窗口的resize、scroll、输入框内容校验等操作时,如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时,在这种情况下如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少触发的频率,同时又不影响实际效果。防抖在事件被触发n秒之后执行,如果在此期间再次触发事件

    2020/03/22
  • Js中的 this 工作原理基础知识教程_原理小白教程

    一、问题的由来学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。var obj = {foo: function () {}
    };
    var foo = obj.foo;
    // 写法一
    obj.foo()
    // 写法二
    foo()上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样。请看下面的例子。va

    2020/03/22
  • trix使用教程_Basecamp 团队推出的富文本编辑器

    trix使用教程 官方网址:https://trix-editor.org/ GitHub:https://github.com/basecamp/trix 简介描述:Baseca…

    2020/03/06
  • images-grid.js入门指南一款jquery响应式弹出层图片画廊插件

    images-grid.js基础入门 官方网址:https://taras-d.github.io/images-grid/ GitHub:https://github.com/t…

    2020/03/05