[TypeStyle] Style CSS pseudo-classes using TypeStyle with $nest
CSS with Using Style classes Nest
2023-09-14 08:59:18 时间
TypeStyle is a very thin layer on top of CSS. In this lesson we show how to change styles based on pseudo classes e.g. :focus :hover and :active which matches very closely with what you would write with raw CSS.
import { style, media } from 'typestyle'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; const fontSize = (value: number | string) => { const valueStr = typeof value === 'string' ? value : value + 'px'; return { fontSize: valueStr } }; const className = style( { color: 'red', transition: 'font-size 0.2s', $nest: { '&:focus': {backgroundColor: 'green'}, '&:hover': fontSize(50), /** iphone */ '@media screen and (-webkit-min-device-pixel-ratio: 2)': { backgroundColor: 'blue' } } }, media({maxWidth: 700, minWidth: 500}, fontSize(20)), media({minWidth: 701}, fontSize(30)), media({maxWidth: 499}, fontSize(15)) ); ReactDOM.render( <button className={className}> Hello Typestyle </button>, document.getElementById('root') );
相关文章
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- css 更改所有text,CSS之cssText「建议收藏」
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- 【说站】css中align-items属性是什么
- HTML之文本格式化、链接、头部、CSS(笔记小结)
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- CSS第三天
- ORA-39322: Cannot use transportable tablespace with TIMESTAMP WITH TIME ZONE columns and different time zone version. ORACLE 报错 故障修复 远程处理
- CSS id 和 class 选择器详解编程语言
- The Shapes of CSS(css的形状)详解编程语言
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- 用Oracle CSS开启数据库之旅(oraclecss)
- 分析学习Oracle深入理解使用With 分析(oracle使用with)
- MySQL查询优化使用WITH子句的限制与替代方案(mysql不能用with)
- 在DIV+CSS排版中新闻列表的制作方法
- css静态滤镜+A:Hover
- DIV+CSS简单的导航条
- 编写纯CSS弹出菜单的原理及实现Byshawl.qiu
- 用js实现CSS圆角生成更新
- CSS优化2-(常用CSS缩写语法总结)
- CSS教程之css选择器、属性、值
- CSS图文混排的几种方案