目录
扩展学习资料
行内样式
引入样式表
CSS Module
@/src/components/common.module.css
@/src/components/listitem.module.css
css管理进阶
Css管理工具
练习
扩展学习资料
资料名称 | 链接 |
css module | CSS Modules 用法教程 - 阮一峰的网络日志 |
在React中使用css预编译 | https://juejin.im/post/5c3d67066fb9a049f06a8323 |
styled component | styled-components |
行内样式
<div style={{fontSize: 18, color: red}}>Content Here</div>
引入样式表
import './listitem.css'; // .title { font-size: 22px } // 全局样式,其他组件也可以使用
<span className='title'>{props.data.name}</span>
CSS Module
// 基于前端工程化开发的一套解决方案
import style from './listitem.module.css'; // .title { font-size: 22px }
<span className={style.title}>{props.data.name}</span>
解决了CSS的一些问题: 全局污染 命名混乱 没有依赖管理 可以不使用sass、less等第三方库
- 不使用选择器,使用class名定义样式
- 不层叠class,使用一个class定义样式
- 用compose来组合
@/src/components/common.module.css
.common {font-size: 16px;background-color: aqua;text-decoration: underline;
}
@/src/components/listitem.module.css
.common {text-decoration: underline;text-indent: 2em;display: block;
}
.title {/* composes: common; */composes: common from 'common.module.css';font-size: 20px;font-weight: bold;color: #710000;
}
css管理进阶
Css管理工具
- Styled-component【js赋能,解决css不具备的一些能力,如:变量循环,函数】
- Classnames【更方便的使用cssModule】
// npm install classnames --save
import classnames from 'classnames/bind';
const cls = classnames.bind(style);
<span className={style.title}>{props.data.name}</span>
// =>
<span className={cls('title', 'price-tag2')}>¥{props.data.price}</span>import cn from 'classnames';
const count = 0;
const _cn = cn({'themed-grid-col-s': !count,
});
<div className={`col-2 themed-grid-col ` + _cn}>{`${count ? count + '个' : count}`}
</div>
练习
1.将案例的购物车列表改为单双行不同的样式(例如双数行底色为: #ddd)
{index%2 > 'background: #ddd'}