styled-components在React中的使用

styled-components

Document link
将组件化进行到底！为react这类组件化的框架提供 标签+样式 的组合。

1. 应用于全局样式定义

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

fieldset, c{ border:none; }

img{display: block;}

address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }

ul, ol ,li{ list-style:none; }

body { color:#333; font:12px BASE "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;}

a { color:#666; text-decoration:none; }

*{box-sizing:border-box}

`

在主入口index.js中引入全局样式作用于所有组件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {GlobalStyle} from './style';
ReactDOM.render(
  <React.Fragment>
    <GlobalStyle />
    <GlobalIconFont />
    <App />
  </React.Fragment>,
  document.getElementById('root')
);

2. 应用于单个组件样式定义

import styled from 'styled-components';

export const LoginWrapper = styled.div`
	z-index: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 56px;
	background: #eee;
`;

在单个组件中使用jsx语法编写dom组件，所有dom组件来源于当前组件中style.js中

import {
  LoginWrapper,
  LoginBox,
  Input,
  Button
}from "./style"

class Login extends PureComponent{
  render(){
      return(
        <LoginWrapper>
          <LoginBox>
            <Input placeholder="请输入账号" type="text" ref={(input) => {this.account = input}} />
            <Input placeholder="请输入密码" type="password" ref={(input) => {this.password = input}} />
            <Button onClick={() => toLogin(this.account,this.password)}>登录</Button>
          </LoginBox>
        </LoginWrapper>
      )
    }
}