项目目录搭建，Styled-Components与Reset.css的结合使用
从今天开始，我们要写一个实战项目
1.创建项目。
create-react-app jianshu
2.删掉项目中没用的东西，使项目到最简状态。
3.现在有个问题是，如果我们在项目的src/index.js文件中，导入了css样式，那么他的作用范围是所有组件。我们想实现的是，导入的css文件，针对性的对某一个组件生效，该怎么办呢？
导入styled-components
npm install --save styled-components
4.编写style.js样式文件。使用styled-components模块中的createGlobalStyle，生命全局样式。全局样式使用的是resetCss，这个样式文件可以做到，在不同浏览器渲染css页面，效果统一。
//===>src/App.js
import React from 'react';
function App() {
return (
<div className="App">
Hello World
</div>
);
}
export default App;
//===>src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './style.js'
ReactDOM.render(
<App />,
document.getElementById('root')
);
//===>src/style.js
import { createGlobalStyle } from 'styled-components'
createGlobalStyle`
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
效果
使用styled-components完成Header组件布局
现在我们来做简书的Header部分
准备工作：
1.从简书官网把Logo下载下来，放到src/statics/logo.png
logo.png
编码：
1.先在App组件中引入Header
//===>src/App.js
import React from 'react';
import Header from './common/header'
function App() {
return (
<Header />
);
}
export default App;
2.编写Header组件
//===>src/common/header/index.js
import React, { Component } from 'react'
import {
HeaderWrapper,
Logo,
Nav,
NavItem,
NavSearch,
Addition,
Button
} from './style'
class Header extends Component {
render() {
return (
<HeaderWrapper>
<Logo />
<Nav>
<NavItem className='left'>首页</NavItem>
<NavItem className='left'>下载App</NavItem>
<NavItem className='right'>登录</NavItem>
<NavItem className='right'>Aa</NavItem>
<NavSearch></NavSearch>
<Addition>
<Button className='writting'>写文章</Button>
<Button className='reg'>注册</Button>
</Addition>
</Nav>
</HeaderWrapper>
)
}
}
export default Header
3.我们发现，Header中的好多组件都没有被定义，那我们用styled-components这个第三方模块来定义一下
export const HeaderWrapper = styled.div`...`指的是HeaderWrapper组件是个div，他带有里面定义的css样式。
静态资源的路径要用类似import logoPic from '../../statics/logo.png'
这种方法声明，然后background:url(${logoPic});这样变量引入。
&.active {
color:#ea6f5a;
}这个语法的意思是，className='active'特有的css样式。
...attrs({...})用来写标签的属性。
//===>src/common/header/style.js
import styled from 'styled-components'
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 NavSearch = styled.input.attrs({
placeholder: '搜索'
})`
width:160px;
height:38px;
padding:0 20px;
margin-top:9px;
margin-left:20px;
box-sizing:border-box;
border:none;
outline:none;
border-radius:19px;
background:#eee;
font-size:14px;
&::placeholder{
color:#999;
}
`
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-size:14px;
&.reg{
color:#ec6149;
}
&.writting{
color:#fff;
background:#ec6149;
}
`
image.png
网友评论