前言

在上一章 React 简单教程-2-ts 和组件参数 中我们新建的子组件 Displayer 没有样式,显得平平无奇,这一篇我们将给他美化一下。

CSS 文件

一般的做法,是在你的组件级目录下新建一个和组件同名的 CSS 文件。如,我们的组件是 displayer.tsx,我们就在同级目录下新建一个 displayer.css,然后在组件 Displayer 中直接引入这个文件:

  1. // 引入
  2. import "./displayer.css";
  3. export function Displayer(props: { name: string, content: string }) {
  4. // ...
  5. return (
  6. <div>
  7. {/* ... */}
  8. </div>
  9. );
  10. }

我们先写下一个样式,该样式将背景变成灰色:

  1. .gray {
  2. background-color: gray;
  3. }

然后在组件中使用样式:

  1. // 引入
  2. import "./displayer.css";
  3. export function Displayer(props: { name: string, content: string }) {
  4. const name = props.name;
  5. const content = props.content;
  6. return (
  7. // className,不是 class
  8. <div className="gray">
  9. <div>{name}</div>
  10. <div>{content}</div>
  11. <Displayer name="My name is App1" content="My content is Aoh!!!1" />
  12. </div>
  13. );
  14. }

注意在 react 中使用的是 className,而不是和 html 一样使用 class,这两者写法不同而已,功能完全一样。注意小驼峰写法。

启动后界面的效果如下:

你看起效了,我们能够用我们熟悉的方式来编写 CSS 样式。

我们简单美化一下,将子组件的样式做得好看一点:

CSS 代码:

  1. .container {
  2. background-color: rgb(40 40 40);
  3. color: white;
  4. padding: 0.5rem;
  5. margin: 0.5rem;
  6. border-radius: 10px;
  7. }
  8. .nav {
  9. display: flex;
  10. margin-bottom: 0.3rem;
  11. }
  12. .btn-red {
  13. height: 12px;
  14. width: 12px;
  15. background-color: rgb(255, 29, 29);
  16. border-radius: 15px;
  17. }
  18. .btn-yellow {
  19. height: 12px;
  20. width: 12px;
  21. background-color: rgb(255, 251, 29);
  22. border-radius: 15px;
  23. margin: auto 0.5rem;
  24. }
  25. .btn-gray {
  26. height: 12px;
  27. width: 12px;
  28. background-color: rgb(220, 220, 220);
  29. border-radius: 15px;
  30. }
  31. .body {
  32. padding: 0.5rem 0;
  33. }

组件代码

  1. import "./displayer.css";
  2. export function Displayer(props: { name: string, content: string }) {
  3. const name = props.name;
  4. const content = props.content;
  5. return (
  6. <div className="container">
  7. <div className="nav">
  8. <span className="btn-red"></span>
  9. <span className="btn-yellow"></span>
  10. <span className="btn-gray"></span>
  11. </div>
  12. <div className="body">
  13. <div>{name}</div>
  14. <div>{content}</div>
  15. </div>
  16. </div>
  17. );
  18. }

界面效果如下:

稍微好看一点了。以后我们便可以在任何想要的地方使用这个子组件了,而不用跟以前写原生 HTML 一样,每个地方都重新写一遍。

CSS 组件样式缺陷

如果我们在开发者工具(F12)中查看页面的 html 代码,我们可以发现我们的样式是直接在 head 的 style 标签中。

就连其他组件的样式也是在 head 的 style 标签中。这就意味着在不同的组件样式文件中,如果出现了相同的 CSS 类名,那么样式就会被覆盖掉。你可以在 App 组件样式中定义一个 CSS 类,再到 Displayer 的组件样式中定义一个相同名字不同属性值的 CSS 类,你会发现 App 组件的样式就失效了。

在组件里使用样式,最好的情况当然是这个组件的样式不会被其他因素所影响。对于这种情况,一种办法是给组件样式起一个独一无二的名字,比如样式上加上组件名:

  1. /* 加上组件名 displayer */
  2. .displayer-container {
  3. /* ... */
  4. }

这种方式写起来既难受又繁琐,我推荐的另外一种方式是使用功能类优先的写法。在我一篇文章 为什么我在 css 里使用功能类优先 有描述到这种写法,使用到的库是 tailwindcss

总结

本文我们学了怎么在 react 组件编写 CSS 样式并引用,也探讨了直接使用 CSS 文件的弊端。

在下一章中我将描述怎么使用 tailwindcss。

React简单教程-3-样式的更多相关文章

  1. React简单教程-6-单元测试

    前言 我想大部分人的前端测试,都是运行项目,直接在浏览器上操作,看看功能正不正常.虽然明明有测试库可以使用,但是因为"要快"的原因,让好好做测试变成了一件影响效率的事. 因为这种无 ...

  2. React简单教程-4-事件和hook

    前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind ...

  3. React简单教程-2-ts和组件参数

    前言 在上一章:React 简单教程-1-组件 我们知道了 React 的组件是什么,长什么样,用 js 和 HTML 小小体验了一下组件.在这一章,我们将使用 typescript(简称 ts) 来 ...

  4. React简单教程-4.1-hook

    前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React ...

  5. React简单教程-3.1-样式之使用 tailwindcss

    前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用 ...

  6. React简单教程-1-组件

    前言 React,Facebook开发的前端框架.当时Facebook对市面上的前端框架都不满意,于是自己捣鼓出了React,使用后觉得特别好用,于是就在2013年开源了. 我也用React开发了一个 ...

  7. React简单教程-5-使用mock

    前言 一个前后端分离的项目,前端人员需要对接后端的接口.如果在后端的接口没有开发好,或者没有测试版可以对接的情况下,前端人员也不能坐等后端接口写好后再开始开发. 一个项目的,理想情况下接口的规范应该是 ...

  8. 【WPF】右下角弹出自定义通知样式(Notification)——简单教程

    原文:[WPF]右下角弹出自定义通知样式(Notification)--简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可.在Button的点击事件中 ...

  9. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

随机推荐

  1. Python简单文件读写

    ''' 用文件存储账户信息 使用列表存储多个账户信息,每个账户为一个字典对象 ''' users=[] #创建一个空列表 users.append({'id':'admin','pwd':'1235@ ...

  2. 彻底理解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 ...

  3. numpy---(上)

    Numpy Numpy ndarray N维数组对象ndarray, 是一系列同类型数据的集合, 索引以0下标开始, 创建一个ndarray对象, 需调用array函数: numpy.array(ob ...

  4. AgileConfig 1.6.0 发布 - 支持服务注册与发现

    大家好,好久没有输出博文了,一是因为比较忙,另外一个原因是最近主要的精力是在给 AgileConfig 添加一个新的功能:服务注册与发现. 先说说为什么会添加这个功能.我自己的项目是用 Consul ...

  5. sqlplus文件查看自带oracle命令的执行过程

    问题描述:看到一篇文章 在$ORACLE_HOME/bin/sqlplus中可以查看到数据库命令的查询语句.可以直接编辑sqlplus文件,查到到我们平时标准系统命令的原脚本,但是自己进行编辑查看却是 ...

  6. VMware下ubuntu 20.04扩容/磁盘

    最近搞zabbix监控,发现搭建的监控server主机磁盘告警.提示/超过阈值80%. 有实在VMware软件下的虚拟机,首先我就是给虚机磁盘增加容量. 增加后发现没什么改变,看来还需要其他操作. 在 ...

  7. Persistent Bits - 题解【二进制】

    题面: WhatNext Software creates sequence generators that they hope will produce fairly random sequence ...

  8. 【2022.04.19】Docker-compose一键安装mirai,搭建QQ机器人最快方法

    先用官方的脚本安装下docker curl -sSL https://get.docker.com/ | sh 安装docker-compose curl -L "https://githu ...

  9. JS获取Cookie失败

    项目开发日记-bug多多篇(1) 在做评论功能的时候遇到了一个很无厘头的错误,我的思路是参照点赞功能,用Ajax技术异步完成评论信息的传输,然后展示在页面上. 那么在提交评论信息的同时,要连着用户名, ...

  10. Python 函数进阶-迭代器

    迭代器 什么是迭代器 能被 next 指针调用,并不断返回下一个值的对象,叫做迭代器.表示为Iterator,迭代器是一个对象类型数据. 概念 迭代器指的是迭代取值的工具,迭代是一个重复的过程,每次重 ...