码迷,mamicode.com
首页 > 其他好文 > 详细

React编写组件的局部样式

时间:2020-02-06 10:51:43      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:使用   现在   选择器   编写   导入   样式   module   怎么   ade   

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

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

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

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

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

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

className={styles.header}。

React编写组件的局部样式

标签:使用   现在   选择器   编写   导入   样式   module   怎么   ade   

原文地址:https://www.cnblogs.com/flamestudio/p/12267641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!