当前位置: 首页 > 开发杂谈 >

day5: CSS style 规划 CSS module (global CSS, CSS module)

在 react 当中有提供了不同的 css 方法,除了常见的 css in css 外, 另外现在前端主流使用的 style system, css in js (styled component, emotion) 和 utility (tailwind) 等,以下会先从最传统的 css in css 介绍起。 为了方便,以下范例都以 create-react-app 为主,除了 sass, 不另外使用 webpack

Stylesheets

  • 在 React 当中如果要使用全域的 CSS ,可以在 index.js 或是 App.js 引入
    只要用 import 的方式就可引入,注意的是这边引入的 css 是全域,只要其他的 component 有重复
    class name,皆有可能此 css 的样式

    //App.js
    
    import 'App.css'
    
    function App (){
      return (<div className="continer">
    		<Button/>
      </div>) 
    }
    
    上面 div 的 className 编译纯 html 後会变成
    
    <div class="container"></div>
    
    function Button (){
    	<div className="container"> 
    	// 因为 App.js 有引入 App.css,包含 container class,
         这边的 container 也会吃到 container 样式
      </div>
    }
    
    

CSS Modules

上叙因为 stylesheet 的方式会造成 class 样式对於全域的污染, 所以我们可以把我们的 css 档命成, [name].module.css , ex: 档名为 Button.module.css 的 css 档, 在此范围内的 css档,在每一个 className 都会产生 hash, 所以每一个 className 都不会污染其他 className, create react app 的 hash 规则为 [filename]\_[classname]\_\_[hash]

  • 以下为范例

    // Button.module.css
    
    .button{
    	width:100px;
    	height:40px;
    	border-radious:50%;
    	text-align:center;
    	line-height:40px;
    }
    
    // Button.js
    import style form './Button.module.css' 
    // style 可以为任意命名,这边取 style 为常用的名称方便辨识
    
    function Button (){
     return <button className={style.button}>Open</button>
    
     上面 button 的 className 编译纯 html 後会变成
     <div class="Button_container_as345"></div>
    }
    

假设在 CSS module 当中想使用一个 预设 的 button 样式, 另外含有 outline 样式的 button ,我们就可以使用 :global 的语法来使 css 中的 class 具有 global 的效果

// Button.module.css

:global(.button){
	width:100px;
	height:40px;
	border-radious:50%;
	text-align:center;
	line-height:40px;
}

.buttonOutline{
  border:1px solid #FFFFFF;
	background-color: #000000;
	color: #FFFFFF;
}
// Button.js
import style form './Button.module.css' 

function Button (){
 return <button className={`button ${style.buttonOutline}`}>Open</button>
	上面 button 的 className 编译纯 html 後会变成
  <div class="button Button_container_as345"></div>
}

相关文章:

  • 前端工程日记 28日 Flex 并排选单
  • 亚马逊卖家布局站点必知的站点基本情况
  • 从 JavaScript 角度学 Python(22) - GitHub API
  • 【Android/Kotlin】拍照/相簿照片上传到Server
  • 英国公司的注册和年审
  • 亚马逊官方是怎么打造Tik Tok账户的?卖家跟着学学
  • Day 17 : 用於生产的机械学习 - 特徵选择 Feature Selection
  • 当SFC在Windows上无反应时如何解决?
  • JS Getter 与 Setter DAY71
  • 预测运动胜负大法,利用资料累积搭配机器学习探索《财富密码》
  • 亚马逊规则之标题优化,提高你的listing转化率
  • 【Day 06】Python 资料容器简介与建立 tuple
  • DVWA练习-Brute Force
  • 为什么要转投TikTok广告?
  • Lazada卖家开店铺如何选品
  • WordPress 调试模式基本指南
  • SiteGround主机评测和推荐
  • Google Voice怎么转移到Lycamobile
  • 阿里云通用型NAS怎么收费的
  • Akaxin:开源社交软件/加密聊天/打造你自己的社交产品
  • DNS是什么?DNS有什么用?为什么要用DNS解析域名
  • Monzo Bank教程:英国银行卡申请教程【教你国内注册申请欧洲银行卡】
  • Astra主题产品方案名称更新,附减价20%优惠码
  • Google:国际化网站即使有相同的英文内容也不属于重复内容
  • 性价比最高的国外VPS服务器推荐:便宜好用的美国VPS大全
  • Facebook和instagram推广营销教程
  • 海外营销周报:Facebook将对其广告工具进行调整,Linkedin恢复中国境内账号注册
  • 海外营销周报:Facebook应用下载量下降30%,TikTok在欧洲测试应用内购买…
  • 最便宜的国外VPS推荐:5美金以下的VPS大全
  • 以太坊是什么?以太坊原理和以太坊入门教程