专栏首页IMWeb前端团队react css组织的另一种选择styled-components

react css组织的另一种选择styled-components

写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB 开发里面推崇的 CSS、JS、HTML 关注点分离不建议把 CSS 写到 JS 里面,随着开发方式的演化,这种写法总会让人觉得很别扭,因为从概念上来讲组件要具有封装、自治的特点,那么把 CSS 写到组件里面会更容易维护,也能把 JS 的功能发挥到极致,styled-components 就是这样一个库,让你很容的用 CSS 创建比较纯粹的样式组件.话不多说,直接上代码.

基本用法

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
  &:hover {
    color: green;
    }
`;
<Title>Hello World, this is my first styled component!</Title>

是不是有种似曾相识感觉?(类似rn 的写法). 也就是说,styled-components 的 css 仍然还是css,动画也不成问题:

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate360} 2s linear infinite;
`;

传递 props

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

<Button primary>Primary</Button>

第三方组件

import styled from 'styled-components';
import { Link } from 'react-router';

const StyledLink = styled(Link)`
  color: palevioletred;
  display: block;
  margin: 0.5em 0;
  font-family: Helvetica, Arial, sans-serif;

  &:hover {
    text-decoration: underline;
  }
`;
<StyledLink to="/">This Link is styled!</StyledLink>

目前支持的dom元素

export default [ 'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr',

// SVG 'circle', 'clipPath', 'defs', 'ellipse', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan', ]

就是这么简单, styled-components 的联合创造者Max Stoiber说:

styled-components 的基本思想就是通过移除样式和组件之间的映射关系来达到最佳实践.

使用styled-components 几乎是零学习成本的切换,存在疑惑也很容易切换会你所熟悉的领域.一个比较明显的缺陷是层级关系的样式没能很好的解决,需要通过其他办法处理.期待即将到来的 v2.0 能够有更好的表现.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react css组织的另一种选择styled-components

    本文作者:IMWeb linq 原文出处:IMWeb社区 未经同意,禁止转载 写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB...

    IMWeb前端团队
  • Web自动化之Headless Chrome概览

    这里所说的Web自动化是所有跟页面相关的自动化,比如页面爬取,数据抓取,页面内容检测,页面功能测试,页面加载性能测试,页面回归测试等等,当前主要由如下几种解决方...

    IMWeb前端团队
  • 实现一个简单的表单校验器

    最近笔者在用React+antd做管理后台系统需求的时候,碰到了一个问题,就是在同一个antd的FormItem下面有多个子数据,那么在表单校验的时候某个数据一...

    IMWeb前端团队
  • react css组织的另一种选择styled-components

    本文作者:IMWeb linq 原文出处:IMWeb社区 未经同意,禁止转载 写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB...

    IMWeb前端团队
  • 网易蜂巢上搭建CI服务

    最近由于工作需要,在不同的服务器上安装了好几遍 Gitlab Runner,由于资料较为分散,时间久了,有些安装步骤必然会有所遗忘。本文演示如何...

    前端黑板报
  • split-brain 脑裂问题(Keepalived)

    脑裂(split-brain) 指在一个高可用(HA)系统中,当联系着的两个节点断开联系时,本来为一个整体的系统,分裂为两个独立节点,这时两个节点开始争抢共享资...

    洗尽了浮华
  • 用 Hadolint 检查 Dockerfile

    Hadolint 是使用不明觉厉的 Haskell 实现的 Dockerfile linter,其实现依据来自于 Docker 官网推荐的 Dockerfile...

    崔秀龙
  • UIScrollView

    前面两篇文章聊的UITableView和UICollectionView都是继承自UIScrollView,本篇文章就来简单聊聊UIScrollView。

    拉维
  • python高级函数 sorted

    sorted函数的函数原型为:sorted(iterable, /, *, key=None, reverse=False)

    渔父歌
  • tkinter -- Label之bitmap使用方法

    py3study

扫码关注云+社区

领取腾讯云代金券