React 基础笔记(CSS 样式冲突, 使用中间件 styled-components 版本)(十九)

styled-components 他的作用就是怕组件里面个个 CSS 之间相互重叠，覆盖,犯冲突,所以引入了这个组件,因为它只对本组件管用

安装

npm install --save styled-components

基础语法

用组件的形式编写 css

//必须要引入
import styled from 'styled-components'

export const HomeWraper = styled.div`
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
`
export const ContentWraper = styled.div`
  max-width: 1200px;
  height: 100px;
  margin: 0 auto;
  border-bottom: 0px;
`

export const LogoWraper = styled.div`
  width: 100px;
  height: 80px;
  float: left;
  margin-top: 10px;
  margin-left: 20px;
`
export const MiddleWraper = styled.div`
  width: 880px;
  height: 100px;
  float: left;
`
export const RightWraper = styled.div`
  width: 100px;
  height: 100px;
  float: left;
`

上面的代码定义了 5 个组件 HomeWraper,ContentWraper,LogoWraper,MiddleWraper,RightWraper,这样每一个组件对应唯一的样式，不出现污染的状况

组件里面这样写

import React, { Component, Fragment } from 'react'
import {
  HomeWraper,
  ContentWraper,
  LogoWraper,
  MiddleWraper,
  RightWraper
} from '../css/header'
class Header extends Component {
  state = {}
  render() {
    return (
      <Fragment>
        <HomeWraper>
          <ContentWraper>
            <LogoWraper />
            <MiddleWraper />
            <RightWraper />
          </ContentWraper>
        </HomeWraper>
      </Fragment>
    )
  }
}

export default Header

全局样式

styled-components 提供了 createGlobalStyle 可以设置全局样式
例如下面就是简单版本的全局引入，里面有了 iconfont 请注意路径要匹配对
代码

import { createGlobalStyle } from 'styled-components'
const GrobalStyle = createGlobalStyle`
    html, body, div, span {
    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;
    background:red;
    }
    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;
    }
  @font-face {font-family: "iconfont";
  src: url('../iconfont/iconfont.eot?t=1563781351915'); /* IE9 */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tupian:before {
  content: "\e643";
}

.icon-fanhui:before {
  content: "\e624";
}

.icon-jiantouxia:before {
  content: "\e62d";
}

.icon-sousuo:before {
  content: "\e632";
}
`
export default GrobalStyle

页面上引入全局样式的时候千万注意它也是组件，但是不能包含其他组件必须优先引入，在 app.js 里面 Global 必须放在外面

import Global from './pages/commonstyle'

class App extends Component {
  render() {
    return (
      <Fragment>
        <Global />
        <PageUi
          inputValue={this.state.inputValue}
          handchange={this.handchange}
          handClick={this.handClick}
          deleteItem={this.deleteItem}
          list={this.state.list}
        />
        <Index />
      </Fragment>
    )
  }
}

export default App

styled-components 规则

背景图片引入

${}里面放的变量

import styled from 'styled-components'
import Middleimg from '../../../images/2019-07-20_200948.png'
export const MiddleWraper = styled.div`
  width: 880px;
  height: 100px;
  float: left;
  background: url(${Middleimg});
`

组件传值的形式也可以

组件传值也只能是地址不能是相对路径
父组件

import React, { Component, Fragment } from 'react'
import Header from './components/Header.js'
class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      imgurl:
        'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114'
    }
  }
  render() {
    return (
      <Fragment>
        <Header imgurl={this.state.imgurl} />
      </Fragment>
    )
  }
}

export default Index

子组件里面把值放到属性里面

<RightWraper imgurl={this.props.imgurl} />

然后 css 里面变量就是$(props)=>{props.imgurl}

export const RightWraper = styled.div`
  width: 100px;
  height: 100px;
  float: left;
  background-image: url(${props => props.imgurl});
  background-size: contain;
`

标签属性

export const NavSearch = styled.input.attrs({
    placeholder: '搜索'，
    type: 'text'
}) `
  width: 160px;
  height: 38px;
  margin-top: 9px;
  padding: 0 40px 0 20px;
  box-sizing: border-box;
  background-color: #eee;
  outline: none;
  border: none;
  border-radius: 19px;
  color: #666;
  &::placeholder {
    color: #999;
  }
  &.focused {
    width: 240px;
  }
`;

继承

比如一个按钮 button 只想改变颜色,大小宽度和高度都不变
styled(Button)

export const Button = styled.button`
  width: 50px;
  height: 50px;
  float: left;
  background: black;
  color: white;
`
export const Button1 = styled(Button)`
  background: red;
  color: yellow;
`