styled-components
Document link
将组件化进行到底!为react这类组件化的框架提供 标签+样式 的组合。
- 应用于全局样式定义
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')
);
- 应用于单个组件样式定义
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>
)
}
}