[TypeStyle] Compose CSS classes using TypeStyle
2017-06-06 14:44
232 查看
We will demonstrate composing classes using the utility classes function.
classesis also what we recommend for theming. Using pure CSS classes means that the component consumers are free to customize the component using any technology (not just TypeStyle).
classesis also what is recommended for conditionally applied TypeStyle CSS class names.
import { style, classes } 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 baseClassName = style( { color: 'green', }, fontSize(15) ); const errorClassName = style({ color: 'red' }, fontSize(12) ); const Section = ({children, hasError, className}: { children?: any, hasError?: boolean, className?: string }) => ( <div className={classes( baseClassName, className, hasError && errorClassName )}> {children} </div> ); const App = () => ( <div> <Section className={style({backgroundColor: 'pink'})}>Success</Section> <Section className={style({backgroundColor: 'yellow'})} hasError={true}>Error</Section> </div> ); ReactDOM.render( <App />, document.getElementById('root') );
相关文章推荐
- [TypeStyle] Style CSS pseudo-classes using TypeStyle with $nest
- [CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes
- [TypeStyle] Add type safety to CSS using TypeStyle
- [TypeStyle] Generate static css + html files using TypeStyle
- css style(input type="button")
- CSS中LI圆点样式li {list-style-type:符号名称}
- <link href ="css/index.css" rel="Stylesheet" type="text/css" />
- (八)学习CSS之line-style-type属性
- CSS中LI圆点样式li {list-style-type:符号名称}
- 可否控制<link type=text/css rel=stylesheet href=style.css>
- [TypeStyle] Style CSS pseudo elements with TypeStyle
- 建站记录2-CSS文件未加载-已解决-Resource interpreted as Stylesheet but transferred with MIME type text/plain
- <link rel="stylesheet" type="text/css" href="css/index.css">是啥意思? .
- css+js 实现在后台加载时前端出现等待的圆形图标,或者批量导入时出现等待图标提高用户体验,废话少说直接上代码 <style type="text/css"> body {
- 警告:Resource interpreted as Stylesheet but transferred with MIME type application/x-css
- CSS——列表(list-style-type)
- <div>标签(css与html写在一起 style type=“text/css”)
- CSS——列表(list-style-type)
- 关于CSS列表list-style-type的颜色和大小控制
- css中用list-style-type指定列表(lists)前面符号