CSS-in-JS 库 styled-class

MIT
JavaScript TypeScript
跨平台
2019-04-22
linsk1998

styled-class是一个CSS-in-JS库

为什么要在JavaScript里写CSS?

  1. 避免命名全局污染
  2. 条件和动态样式(比如选择主题色之类的)
  3. 在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

styled-class的基本用法

import {styled} from "styled-class";

@styled
class Div1Style{
	background="red";
}
export function DemoComponent(){
	return <div className={Div1Style.toString()}>...这是一个组件</div>
}

使用styled装饰器,会生成的唯一class名称,自动创建相关style标签,并修改toString函数。toString()可以省略,会自动调用。 查看演示

结合mobx使用

import {styled,rgb,hsl,darken,lighten} from "styled-class";
import {observable, computed} from "mobx";

//主题色,用mobx监视
class Theme{
	@observable//主题色
	primary=rgb(51,122,183);
	 
	@computed//主题色-浅色
	get text(){
		return lighten(this.primary,0.15);
	}
}
var theme=new Theme();

@styled
export class PanelStyle{
	background=theme.primary;
	color=theme.text;
}
export function DemoComponent(){
	return <div className={PanelStyle.toString()} onClick={changeTheme}>...这是一个组件</div>
}
function changeTheme(){//使用mobx监视,primary改变时,自动更新样式
	theme.primary=hsl(360*Math.random(),0.55,0.45);//hsl 色相 饱和度 亮度
}

查看演示

可以使用类的继承来复用样式

import {styled} from "styled-class";

class BoxStyle{
	display="inline-block";
	margin="20px";
	padding="20px";
}
@styled
export class Div1Style extends BoxStyle{
	background="red";
}
@styled
export class Div2Style extends BoxStyle{
	background="blue";
}

查看演示

可以和Less、Sass等预处理器同时使用

直接使用预处理器编译完成的即可。

xxx.className=MyStyle.toString()+" clearfix";

内置了常用的颜色计算函数

import {styled,rgb,rgba,hsl,darken,lighten,mix,saturate,spin} from "styled-class";

var a=rgba(255,255,255,1);
var b=mix(rgba(100,100,100,1),0xc8c8c8);

可处理常用的兼容性问题和浏览器补全

import {styled,gradient} from "styled-class";
@styled
class GradientExample{
	color="white";
	margin="20px";
	padding="20px";
	background=gradient(0x3388ff,0x000000);
}

查看演示

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

React中使用styled-components的基础使用

  好了,废话不多说,开工      今天我们不对react的环境进行搭建,我直接用脚手架搭一个最简单的环境来用,进入主题      1.使用styled-components      首先我们要安装style...

2018/11/16 22:41
6
0
VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)

插件列表 名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 Beautify css/sass/scss/less css/sass/l...

2017/09/16 17:16
590
1
css-dialog提示

<BackGround> <Dialog> <Hint>内容不完善内容不完善内容不完善内容不完善内容不完善</Hint> <OKButton>确定</OKButton> </Dialog> </BackGround> BackGround.js import styled from 'st......

07/03 13:41
9
1
使用styled-components修改antd的样式

import styled from 'styled-components'; import { Descriptions } from 'antd'; const WrapDescriptions = styled(Descriptions)` .ant-descriptions-view { overflow: scroll; } `; expor...

07/26 17:24
25
0
推荐 9 个样式化组件的 React UI 库

简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的。 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CSS 再到 CSS in JS,...

2018/11/06 12:16
475
0
Ace admin --table(单表)

Ace admin --table(单表)

2014/11/12 16:54
8.8K
1
VSCode拓展推荐(前端开发)

一、使用说明 相似功能的插件,不推荐全都装上,请挑选一个使用 本列表所有插件均已测试使用过,但不代表不存在问题 任何插件本身的问题,请到对于代码仓库提交issue 二、拓展 名称 简述 Au...

2018/08/27 15:42
399
0
前端进阶 -css的弱化与js的强化(11)

web的三要素html, css, js在前端组件化的过程中,比如react,vue等组件化框架的运用,使html 的弱化与 js 的强化成为了一种趋势,而在这个过程中,其实还有另一种趋势也在慢慢形成:css 的弱...

2018/09/22 22:22
10
0
JSON用法简介

【JSON简介】   jsoncpp 主要包含三种类型的 class:Value、Reader、Writer。jsoncpp 中所有对象、类名都在 namespace Json 中,包含 json.h 即可。 【VALUE】    Json::Value 是jsoncpp...

2015/07/08 09:58
177
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部