styled-class 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
styled-class 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: 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);
}

查看演示

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

styled-class 的相关资讯

还没有任何资讯

styled-class 的相关博客

Styled Label

给UILabel的文字加上各种各样的艺术字体效果,包括阴影(内阴影和外阴影)、渐变色彩、彩虹、浮雕效果等等,而且使用十分简单...

styled-components的基本使用

一、官网地址   https://www.styled-components.com/ 二、styled-components   1、styled-components 样式化组件,主要作...

styled-component, emotion and jss 对比

如果你用组件化的前端方案,比如React这种,那么毫无疑问,css in js方案要比传统的css方案要好。 css in js 有两点不可撼动的...

chrome styled 日志

在Java里面有众多日志工具,其实在JavaScript里面也可以有。那么怎么自定义一些样式呢? 在chrome中可以这样: console.log(...

React-使用styled-components

1.安装 npm install --save styled-components 2.简单使用 style.js: import styled from 'styled-components'; import { in...

react之styled-components(基础篇)

介绍 它是react的一个库,可以用来美化组件 它的写法依赖于es6,依赖于webpack 安装 -yarn add styled-components 基本使用...

【react】---styled-components的基本使用---【巷子】

一、官网地址   https://www.styled-components.com/ 二、styled-components   1、styled-components 样式化组件,主要作...

使用styled-components修改antd的样式

import styled from 'styled-components'; import { Descriptions } from 'antd'; const WrapDescriptions = styled(Descript...

Styled PageControl

自定义PageControl各种样式,包括形状、大小、颜色、文字等等。 Code4App编译测试,测试环境:Xcode 4.3, iOS 5.0。 转载:ht...

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

  好了,废话不多说,开工      今天我们不对react的环境进行搭建,我直接用脚手架搭一个最简单的环境来用,进入主题 ...

styled-class 的相关问答

还没有任何问答,马上提问

评论 (0)

加载中
更多评论
0 评论
3 收藏
分享
返回顶部
顶部