目录
扩展学习资料
行内样式
引入样式表
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等第三方库文章来源：https://www.toymoban.com/news/detail-641814.html
- 不使用选择器，使用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）文章来源地址https://www.toymoban.com/news/detail-641814.html
{index%2 > 'background: #ddd'}到了这里，关于步入React前厅 - Css In React的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
