react 样式的写法之一 ---》styled-components的基本使用
【react】---styled-components的基本使用---【WangQi】
一、官网地址
https://www.styled-components.com/
二、styled-components
1、styled-components 样式化组件,主要作用是它可以编写实际的CSS代码来设计组件样式,也不需要组件和样式之间的映射,即创建后就是一个正常的React 组件,并且可以附加样式给当前组件。 优化react组件
2、在一个组件内会将结构、样式和逻辑写在一起,虽然这违背了关注点分离的原则,但是这有利于组件间的隔离。为了顺应组件化的潮流
3、使用styled-components不需要再使用className属性来控制样式,而是将样式写成更具语义化的组件的形式
4、使用style-components会随机生成一个class名称,这样不会污染到全局变量,当然因为随机生成,维护会增加难度
三、基本使用
1、安装
cnpm i styled-components -S || yarn add styled-components
2、引入
import styled from "styled-components";
3、使用
export const Header = styled.div` width:100%; height:1rem; background:red `
import {Header} from "./style/index";
class App extends Component{
render(){
return (
<Header/>
)
}
}
四、全局默认样式引入
引入新的API createGlobalStyle ,在下面创建一个 GlobalStyle 变量,用 createGlobalStyle 方法把全局样式包裹在其中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}
body,html,#root{ height: 100%; overflow: hidden; } `
//将 <GlobalStyle /> 组件放在 render() 中最外层元素下面
五、传参
如果我们需要动态改变元素的样式,则可以通过传递参数的方式进行改变
import {Header} from "style/index.js" render(){ return ( <Header bgColor="red"/> ) }
style/index.js
import styled from "styled-components";
export const Header = styled.div`
width:100px;
height:200px;
props.bgColor}
`
六、继承
如果我们需要继承样式的时候我们可以通过 styled(继承的组件名称)``
const button = styled.button` border:0; width:100px; height:40px; text-align:center; color:#000; ` export const StyledButton = styled(button)` color:#fff; `
七、修改组件内部标签
在调用组件的时候我们可以通过as来修改组件 as="元素名称"
render(){ return ( <Header as="p"/> ) }
Header组件内部渲染的时候就是用的p标签
八、定义组件属性
export const Input = styled.input.attrs({ value:"请输入密码", name:"input" })` border:0; width:100px; height:100px; `
九、背景图片引入
import logo from "./imgs/logo.png"; export const BgLogo = styled.div` width:100px; height:200px; background:url(${logo}) no-repate; `
十、塑造组件
有一种情况,一些原本就已经是组件,需要给这些组件添加样式,这时需要用到塑造组件
import React from "react"; import styled from "styled-components"; const Link = ({className,children})=>( <a className={className}> {children} </a> ) export StyleLink = styled(Link)` color:red `
十一、动画
const move = keyframes` 0%{ transform:rotate(0%); } 100%{ transform :rotate(100%); } ` export const TransFormDiv = styled.div` width:100px; height:100px; background:red; animation:${move} 2s; `
十二、当标签过多时需要划分太多组件,我们可以通过以下写法来简化组件的编写
&代表父级
export const StyledUl = styled.ul` border:1px solid #ccc; >li{ border-bottom:1px solid #green; line-height:30px; padding-left:20px; &>p{ color:red } } `