当前位置：首页 > 软件库 > Web应用开发 > 网页组件 >

styled-class

CSS-in-JS 库

授权协议 MIT

开发语言 JavaScript TypeScript

所属分类 Web应用开发、网页组件

软件类型开源软件

地区国产

投递者顾文昌

操作系统跨平台

开源组织无

适用人群未知

软件概览

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

为什么要在JavaScript里写CSS？

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

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);
}

查看演示

使用案例

React之中的styled-components

在react之中使用css不像vue之中那么方便，react官方也没有很统一的用法，下面是有关于styled-component的使用。 1、安装库 yarn add styled-components 2、基本使用在其中styled.div``代表的是div的css样式，在其中.banner表示div下的类名为banner的节点。span之下的&.active，代表的是span标签并且类为a
React中styled-components的使用（样式组件库）

一、官网地址 https://www.styled-components.com/ 二、styled-components 1、styled-components 样式化组件，主要作用是它可以编写实际的CSS代码来设计组件样式，也不需要组件和样式之间的映射，即创建后就是一个正常的React 组件，并且可以附加样式给当前组件。优化react组件 2、在一个组件内会将结构、样式和逻辑写在一起，
Styled-Components

它是通过JavaScript改变CSS编写方式的解决方案之一，从根本上解决常规CSS编写的一些弊端。通过JavaScript来为CSS赋能，我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。尽管像SASS、LESS这种预处理语言添加了很多用用的特性，但是他们依旧没有对改变CSS的混乱有太大的帮助。因此组织工作交给了像 BEM这样的方法，虽然比较有用，但是它完全是自选方案，不能
使用styled-components来进行react开发

CSS是一门几十分钟就能入门，但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是，本身不具备真正的模块化能力。系列文章链接 ↓ ↓ 【CSS模块化之路1】使用BEM与命名空间来规范CSS 【CSS模块化之路2】webpack中的Local Scope 【CSS模块化之路3】使用?styled-components来进行react开发 1. 面临的问题
styled-components基本使用

styled-components基本使用一、官网地址 https://www.styled-components.com/ 二、styled-components 　　1、styled-components 样式化组件，主要作用是它可以编写实际的CSS代码来设计组件样式，也不需要组件和样式之间的映射，即创建后就是一个正常的React 组件，并且可以附加样式给当前组件。优化react组件
【react基础】11、react的样式方案 classnames和styled-components

从npm官网来看，目前classnames的下载量越三百多万，styled-components下载量约一百多万。使用人数都是很多的，各有个的优缺点，以自己的代码习惯来选择吧。一、classnames使用官网对classnames的解释是：A simple JavaScript utility for conditionally joining classNames together.（将属性
在react中使用styled-components的几个简单使用方式

安装:npm install styled-components 引入:import styled from "styled-components"; 基本使用 /* 创建了一个Wrapper样式组件，该组件渲染之后是一个div标签 */ const Wrapper = styled.div` color: blue; `; <Wrapper > <span>这是一
React styled-components实现css布局并使用iconfont

styled-components使用方式：在style.js文件中定义一个有样式的组件，组件中再去引入这个组件，进行页面的现实。使用styled-components这个第三方模块的好处：样式都写在style.js文件里，实际上const出来的常量是一个个带样式的组件。这些组件的样式是独享的，他们之间不会产生任何的影响，有效的避免了多个组件可能产生css样式冲突

styled-class

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

为什么要在JavaScript里写CSS？

styled-class的基本用法

结合mobx使用

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

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

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

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

同类工具

相关阅读

相关文章

相关问答

相关文档