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
小编说
以上是编程之家为你收集整理的styled-components全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。