我们都知道,在Vue的单文件组件中,style标签中编写的样式默认为全局样式,如果我们想编写局部样式,

使用一个scoped关键字就可以。

  那么在React中怎么实现呢? (注: 这种方法必须使用类选择器)

   首先,将css文件命名为xxx.module.css。

   然后,我们之前导入css都是用import './xxx.css',现在需要改成import styles(命名随意) from './xxx.css'

   最后,假设我们的类选择器是.header, 那么之前我们只需要写className="header",但是要使用我们的组件局部样式,我们需要在 要指定样式的元素上写

className={styles.header}。

React编写组件的局部样式的更多相关文章

  1. react 编写组件 五

    看以下示例了解如何定义一个组件 // 定义一个组件LikeButton var LikeButton = React.createClass({ // 给state定义初始值 getInitialSt ...

  2. 初学React:组件的样式

    React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  4. 用 React 编写移动应用 React Native

    转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...

  5. 从零搭建react+ts组件库(封装antd)

    为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...

  6. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  7. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  8. react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用

    最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页.. ...

  9. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

随机推荐

  1. 关于dom树

    当用户访问ip地址,比如 ==www. aa .com/bb/cc/dd.html== 正常情况下是访问一个叫aa.com的服务器里的bb文件夹里的cc文件夹里的dd.html这个文件(其实很多情况都 ...

  2. dedeCMS网站栏目管理---释义

    一.常规选项 文件保存目录:可以指定保存的目录,也可以用拼音,指定为拼音时系统会自动生成栏目拼音的目录,文件保存目录一般用拼音即可. 目录相对位置:有上级目录,CMS目录与站点根目录.实际上指的都是网 ...

  3. php中常用的加密函数

    1.MD5加密: string md5 ( string $str [, bool $raw_output = false ] ) (1)md5()默认情况下以 32 字符十六进制数字形式返回散列值, ...

  4. leetcode1161 Maximum Level Sum of a Binary Tree

    """ BFS遍历题,一遍AC Given the root of a binary tree, the level of its root is 1, the leve ...

  5. DCGAN增强图片数据集

    DCGAN增强图片数据集 1.Dependencies Python 3.6+ PyTorch 0.4.0 numpy 1.14.1, matplotlib 2.2.2, scipy 1.1.0 im ...

  6. centos7安装google-chrome和chromedriver

    1.root用户下进入到etc/yum.repos.d目录下  [root@f7d6b9f2-1291-4d2f-8805-aef94deac9f7 yum.repos.d]# pwd  /etc/y ...

  7. PyPI提供双因素身份验证(2FA),已提高下载安全性

    前天,Python的核心开发团队宣布PyPI现在提供双因素身份验证(2FA),以提高Python包下载的安全性,从而降低未经授权的帐户访问的风险.该团队宣布将在Python Package Index ...

  8. 105-PHP使用var_dump查看类的类型

    <?php class ren{ //定义人类 } class mao{ //定义猫类 } $ren1=new ren(); //实例化人类 $mao1=new mao(); //实例化猫类 $ ...

  9. 100-PHP二维数组的元素输出三

    <?php $stu=array(array(76,87,68), array(65,89,95), array(90,80,66), array(90,95,65)); //定义一个二维数组 ...

  10. 好记性不如烂笔头--shell参数及shell判断if系列

    $0 当前脚本的文件名$n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例如,第一个参数是$1,第二个参数是$2$# 传递给脚本或函数的参数个数$* 传递给脚本或函数的所有参数$@ 传递给 ...