2020/11/21、 周六、今天又是奮斗的一天。

@Author：Runsen

創建項目

使用 React 官方腳手架工具提供的工作流快速搭建和開發項目。發現React比Vue在某些方面還是強很多。

$ create-react-app jianshu $ cd jianshu $ npm start

styled-components

styled-components 是一個常用的 css in js 類庫。和所有同類型的類庫一樣，通過 js 賦能解決了原生 css 所不具備的能力，比如變量、循環、函數等。

使用 styled-components 加速 React 開發

$ npm install styled-components

styled-components官方文檔： https://styled-components.com/

注意：這里styled-components更新,沒有injectGlobal 的Api。用 createGlobalStyle 替換掉，export導出，然后在App.js導入。

當今流行的瀏覽器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有的瀏覽器對CSS的解釋與設計師的CSS定義初衷相沖突，導致瀏覽器的兼容性問題。

設計師想到了一種避免瀏覽器兼容性問題的方法，那就是CSS Reset，什么是CSS Reset？我們可以把它叫做CSS重設

不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值，所以我們要先定義好一些CSS樣式

具體的Reset.css代碼 ：https://meyerweb.com/eric/tools/css/reset/

Header區域布局

index.js

import React, {Component} from 'react' import {HeaderWrapper,Logo,Nav,NavItem,NavSearch,SearchWrapper,Addition,Button, } from './style'class Header extends Component{render() {return (<HeaderWrapper><Logo></Logo> <Nav><NavItem className='left active'>首頁</NavItem><NavItem className='left'>下載App</NavItem><NavItem className='right'>登錄</NavItem><NavItem className='right'> <i className="iconfont">&#xe636;</i></NavItem><SearchWrapper><NavSearch></NavSearch><i className="iconfont">&#xe60c;</i></SearchWrapper></Nav> <Addition><Button className='writting'><i className="iconfont">&#xe678;</i>&nbsp;寫文章</Button><Button className='reg'>注冊</Button></Addition></HeaderWrapper>)} }export default Header;

style.js

import styled from 'styled-components'; // 由于webpack打包的原因，因此png圖片需要導入，不能再background寫成url import logoPic from '../../statics/Logo.png';export const HeaderWrapper = styled.div`position: relative;height: 56px;border-bottom: 1px solid #f0f0f0; `;export const Logo = styled.a.attrs({href: '/' })`position: absolute;top: 0;left: 0;display: block;width: 100px;height: 56px;background: url(${logoPic});background-size: contain; `;export const Nav = styled.div`width: 960px;height: 100%;padding-right: 70px;box-sizing: border-box;margin: 0 auto; `;export const NavItem = styled.div`line-height: 56px;padding: 0 15px;font-size: 17px;color: #333;&.left {float: left;}&.right {float: right;color: #969696;}&.active {color: #ea6f5a;} `;export const SearchWrapper = styled.div`position: relative;float: left;.slide-enter {transition: all .2s ease-out;}.slide-enter-active {width: 240px;}.slide-exit {transition: all .2s ease-out;}.slide-exit-active {width: 160px;}.iconfont {position: absolute;right: 5px;bottom: 5px;width: 30px;line-height: 30px;border-radius: 15px;text-align: center;&.focused {background: #777;color: #fff;}} `;export const NavSearch = styled.input.attrs({placeholder: '搜索' })`width: 160px;height: 38px;padding: 0 30px 0 20px;margin-top: 9px;margin-left: 20px;box-sizing: border-box;border: none;outline: none;border-radius: 19px;background: #eee;font-size: 14px;color: #666;&::placeholder {color: #999;}&.focused {width: 240px;} `;export const Addition = styled.div`position: absolute;right: 0;top: 0;height: 56px; `;export const Button = styled.div`float: right;margin-top: 9px;margin-right: 20px;padding: 0 20px;line-height: 38px;border-radius: 19px;border: 1px solid #ec6149;font-siz: 14px;&.reg {color: #ec6149;}&.writting {color: #fff;background: #ec6149;} `

iconfont圖標的導入

在阿里巴巴創建項目，下載至本地。

最終Header布局如下

總結

以上是生活随笔為你收集整理的八十三、React简书项目：Styled-Components 与 Reset.css 的结合使用，完成Header布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。