styled-components

编程之家收集整理的这个编程导航主要介绍了styled-components编程之家,现在分享给大家,也给大家做个参考。

styled-components

styled-components 介绍

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>

网站地址:https://styled-components.com react css-in-js styled-components css

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

网站描述:针对React写的一套css in js框架

styled-components官方网站

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

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

相关文章

johnny-five,Bocoup 的 JavaScript 机器和物联网编程框架
WePY,一款让小程序支持组件化开发的框架
Deep playground,神经网络的交互式可视化,使用d3.js和TypeS...
ShareDB,用于并发编辑系统的前端数据库
RxJS,RxJS 是使用 Observables 的响应式编程的库
egg-react-ssr,最小而美的Egg + React + SSR 服务端渲染应用...