React简单教程-3-样式
前言
在上一章 React 简单教程-2-ts 和组件参数 中我们新建的子组件 Displayer
没有样式,显得平平无奇,这一篇我们将给他美化一下。
CSS 文件
一般的做法,是在你的组件级目录下新建一个和组件同名的 CSS 文件。如,我们的组件是 displayer.tsx
,我们就在同级目录下新建一个 displayer.css
,然后在组件 Displayer
中直接引入这个文件:
// 引入
import "./displayer.css";
export function Displayer(props: { name: string, content: string }) {
// ...
return (
<div>
{/* ... */}
</div>
);
}
我们先写下一个样式,该样式将背景变成灰色:
.gray {
background-color: gray;
}
然后在组件中使用样式:
// 引入
import "./displayer.css";
export function Displayer(props: { name: string, content: string }) {
const name = props.name;
const content = props.content;
return (
// className,不是 class
<div className="gray">
<div>{name}</div>
<div>{content}</div>
<Displayer name="My name is App1" content="My content is Aoh!!!1" />
</div>
);
}
注意在 react 中使用的是 className
,而不是和 html 一样使用 class
,这两者写法不同而已,功能完全一样。注意小驼峰写法。
启动后界面的效果如下:
你看起效了,我们能够用我们熟悉的方式来编写 CSS 样式。
我们简单美化一下,将子组件的样式做得好看一点:
CSS 代码:
.container {
background-color: rgb(40 40 40);
color: white;
padding: 0.5rem;
margin: 0.5rem;
border-radius: 10px;
}
.nav {
display: flex;
margin-bottom: 0.3rem;
}
.btn-red {
height: 12px;
width: 12px;
background-color: rgb(255, 29, 29);
border-radius: 15px;
}
.btn-yellow {
height: 12px;
width: 12px;
background-color: rgb(255, 251, 29);
border-radius: 15px;
margin: auto 0.5rem;
}
.btn-gray {
height: 12px;
width: 12px;
background-color: rgb(220, 220, 220);
border-radius: 15px;
}
.body {
padding: 0.5rem 0;
}
组件代码
import "./displayer.css";
export function Displayer(props: { name: string, content: string }) {
const name = props.name;
const content = props.content;
return (
<div className="container">
<div className="nav">
<span className="btn-red"></span>
<span className="btn-yellow"></span>
<span className="btn-gray"></span>
</div>
<div className="body">
<div>{name}</div>
<div>{content}</div>
</div>
</div>
);
}
界面效果如下:
稍微好看一点了。以后我们便可以在任何想要的地方使用这个子组件了,而不用跟以前写原生 HTML 一样,每个地方都重新写一遍。
CSS 组件样式缺陷
如果我们在开发者工具(F12)中查看页面的 html 代码,我们可以发现我们的样式是直接在 head 的 style 标签中。
就连其他组件的样式也是在 head 的 style 标签中。这就意味着在不同的组件样式文件中,如果出现了相同的 CSS 类名,那么样式就会被覆盖掉。你可以在 App 组件样式中定义一个 CSS 类,再到 Displayer 的组件样式中定义一个相同名字不同属性值的 CSS 类,你会发现 App 组件的样式就失效了。
在组件里使用样式,最好的情况当然是这个组件的样式不会被其他因素所影响。对于这种情况,一种办法是给组件样式起一个独一无二的名字,比如样式上加上组件名:
/* 加上组件名 displayer */
.displayer-container {
/* ... */
}
这种方式写起来既难受又繁琐,我推荐的另外一种方式是使用功能类优先的写法。在我一篇文章 为什么我在 css 里使用功能类优先 有描述到这种写法,使用到的库是 tailwindcss。
总结
本文我们学了怎么在 react 组件编写 CSS 样式并引用,也探讨了直接使用 CSS 文件的弊端。
在下一章中我将描述怎么使用 tailwindcss。
React简单教程-3-样式的更多相关文章
- React简单教程-6-单元测试
前言 我想大部分人的前端测试,都是运行项目,直接在浏览器上操作,看看功能正不正常.虽然明明有测试库可以使用,但是因为"要快"的原因,让好好做测试变成了一件影响效率的事. 因为这种无 ...
- React简单教程-4-事件和hook
前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind ...
- React简单教程-2-ts和组件参数
前言 在上一章:React 简单教程-1-组件 我们知道了 React 的组件是什么,长什么样,用 js 和 HTML 小小体验了一下组件.在这一章,我们将使用 typescript(简称 ts) 来 ...
- React简单教程-4.1-hook
前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React ...
- React简单教程-3.1-样式之使用 tailwindcss
前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用 ...
- React简单教程-1-组件
前言 React,Facebook开发的前端框架.当时Facebook对市面上的前端框架都不满意,于是自己捣鼓出了React,使用后觉得特别好用,于是就在2013年开源了. 我也用React开发了一个 ...
- React简单教程-5-使用mock
前言 一个前后端分离的项目,前端人员需要对接后端的接口.如果在后端的接口没有开发好,或者没有测试版可以对接的情况下,前端人员也不能坐等后端接口写好后再开始开发. 一个项目的,理想情况下接口的规范应该是 ...
- 【WPF】右下角弹出自定义通知样式(Notification)——简单教程
原文:[WPF]右下角弹出自定义通知样式(Notification)--简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可.在Button的点击事件中 ...
- react 入门教程 阮一峰老师真的是榜样
- 转自阮一峰老师博客 React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...
随机推荐
- Python简单文件读写
''' 用文件存储账户信息 使用列表存储多个账户信息,每个账户为一个字典对象 ''' users=[] #创建一个空列表 users.append({'id':'admin','pwd':'1235@ ...
- 彻底理解synchronized
1. synchronized简介 在学习知识前,我们先来看一个现象: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 public ...
- numpy---(上)
Numpy Numpy ndarray N维数组对象ndarray, 是一系列同类型数据的集合, 索引以0下标开始, 创建一个ndarray对象, 需调用array函数: numpy.array(ob ...
- AgileConfig 1.6.0 发布 - 支持服务注册与发现
大家好,好久没有输出博文了,一是因为比较忙,另外一个原因是最近主要的精力是在给 AgileConfig 添加一个新的功能:服务注册与发现. 先说说为什么会添加这个功能.我自己的项目是用 Consul ...
- sqlplus文件查看自带oracle命令的执行过程
问题描述:看到一篇文章 在$ORACLE_HOME/bin/sqlplus中可以查看到数据库命令的查询语句.可以直接编辑sqlplus文件,查到到我们平时标准系统命令的原脚本,但是自己进行编辑查看却是 ...
- VMware下ubuntu 20.04扩容/磁盘
最近搞zabbix监控,发现搭建的监控server主机磁盘告警.提示/超过阈值80%. 有实在VMware软件下的虚拟机,首先我就是给虚机磁盘增加容量. 增加后发现没什么改变,看来还需要其他操作. 在 ...
- Persistent Bits - 题解【二进制】
题面: WhatNext Software creates sequence generators that they hope will produce fairly random sequence ...
- 【2022.04.19】Docker-compose一键安装mirai,搭建QQ机器人最快方法
先用官方的脚本安装下docker curl -sSL https://get.docker.com/ | sh 安装docker-compose curl -L "https://githu ...
- JS获取Cookie失败
项目开发日记-bug多多篇(1) 在做评论功能的时候遇到了一个很无厘头的错误,我的思路是参照点赞功能,用Ajax技术异步完成评论信息的传输,然后展示在页面上. 那么在提交评论信息的同时,要连着用户名, ...
- Python 函数进阶-迭代器
迭代器 什么是迭代器 能被 next 指针调用,并不断返回下一个值的对象,叫做迭代器.表示为Iterator,迭代器是一个对象类型数据. 概念 迭代器指的是迭代取值的工具,迭代是一个重复的过程,每次重 ...