styled-components的基本使用

时间:2022-08-11 19:33:31

一、官网地址
  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、使用

styled-components的基本使用
export const Header = styled.div`
width:100%;
height:1rem;
background:red
` import {Header} from "./style/index";
class App extends Component{
  render(){
    return (
      <Header/>
    )
  }
}
styled-components的基本使用

四、全局默认样式引入

引入新的API createGlobalStyle ,在下面创建一个 GlobalStyle 变量,用 createGlobalStyle 方法把全局样式包裹在其中import { createGlobalStyle } from "styled-components";export const GlobalStyle = createGlobalStyle`

styled-components的基本使用
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 React, { Component ,Fragment} from 'react';
import {GlobalStyle} from "./reset";
class App extends Component {
  render() {
    return (
      <Fragment>
        <GlobalStyle/>
      </Fragment>
    );
  }
}
export default App;
 
styled-components的基本使用

五、传参

 如果我们需要动态改变元素的样式,则可以通过传递参数的方式进行改变

styled-components的基本使用
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-components的基本使用

六、继承

  如果我们需要继承样式的时候我们可以通过 styled(继承的组件名称)``

styled-components的基本使用
const button = styled.button`
border:0;
width:100px;
height:40px;
text-align:center;
color:#000;
` export const StyledButton = styled(button)`
color:#fff;
`
styled-components的基本使用

七、修改组件内部标签

  在调用组件的时候我们可以通过as来修改组件  as="元素名称"

styled-components的基本使用
render(){
return (
<Header as="p"/>
)
} Header组件内部渲染的时候就是用的p标签
styled-components的基本使用

八、定义组件属性

styled-components的基本使用
export const Input = styled.input.attrs({
value:(props)=>props.value,
name:"input"
})`
border:0;
width:100px;
height:100px; `
styled-components的基本使用

九、背景图片引入

styled-components的基本使用
import logo from "./imgs/logo.png";

export const BgLogo =  styled.div`
width:100px;
height:200px;
background:url(${logo}) no-repate;
`
styled-components的基本使用

十、塑造组件

  有一种情况,一些原本就已经是组件,需要给这些组件添加样式,这时需要用到塑造组件

styled-components的基本使用
import React from "react";
import styled from "styled-components"; const Link = ({className,children})=>(
<a className={className}>
{children}
</a>
) export StyleLink = styled(Link)`
color:red
`
styled-components的基本使用

十一、动画

styled-components的基本使用
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; `
styled-components的基本使用

十二、当标签过多时需要划分太多组件,我们可以通过以下写法来简化组件的编写

  &代表父级

styled-components的基本使用
export const StyledUl = styled.ul`
border:1px solid #ccc;
>li{
border-bottom:1px solid #green;
line-height:30px;
padding-left:20px;
&>p{
color:red }
} `