React styled components样式组件化使用流程

目录

• 安装
• 基本使用
• props传值修改样式
• 样式化组件
• 样式扩展
• 动画

将style样式写在同一个文件中并且组件化使用.

安装

npm i styled-components

基本使用

const 样式组件名=引入的styled-components.替代的标签(支持sass写法)

再使用样式组件名将标签包裹起来即可

import React, { Component } from 'react';
import styled from 'styled-components';
class App001 extends Component {
    render() {
        const StyleFooter=styled.footer`
            background:yellow;
            position:fixed;
            left:0;
            bottom:0;
            width:100%;
            height:50px;
            line-height:50px;
            text-align:center;
            ul{
                display:flex;
                li{
                    flex:1;
                    &:hover{
                        background:red;
                    }
                }
            }
        `
        return (
            <StyleFooter>
            <footer>
                <ul>
                    <li>首页</li>
                    <li>列表</li>
                    <li>我的</li>
                </ul>
            </footer>
            </StyleFooter>
        );
    }
}
export default App001;

这样就能成功实现对该包裹标签的样式实现

props传值修改样式

通过给标签绑定属性值进行传值

通过${props=>props.属性名}获取标签上传来的属性

import React, { Component } from 'react';
import styled from 'styled-components';
class App002 extends Component {
    render() {
        const StyledInput=styled.input`
            outline:none;
            border-radius:10px;
            border-bottom:1px solid red;
        `
        const StyledDiv=styled.div`
        background:${props=>props.bg||'red'};
        width:100px;
        height:100px;
        `
        return (
            <div>
                <StyledInput type="text"></StyledInput>
                <StyledDiv bg="green"></StyledDiv>
            </div>
        );
    }
}
export default App002;

样式化组件

通过父类修改子组件的样式

首先创建样式，然后Child子组件能接收到一个props,再将props.className绑定到自己className上,这样就实现了样式化组件

import React, { Component } from 'react';
import styled from 'styled-components';
class App003 extends Component {
    render() {
        //1.创建样式
        const StyleChild=styled(Child)`
        background:red;
        `
        return (
            <div>
                <StyleChild>
                <Child />
                </StyleChild>
            </div>
        );
    }
}
function Child(props){
    //2.绑定classname,props由父类传来
    return <div className={props.className}>孩子</div>
}
export default App003;

样式扩展

可以当作样式继承，通过继承上一个样式从而获取和它一样的样式

下方结果能得到一个按钮是黄色，一个是红色–宽高一样,通过styled(自定义的样式名)从而继承这个自定义的样式…

import React, { Component } from 'react';
import styled from 'styled-components';
class App004 extends Component {
    render() {
        const StyledButton=styled.button`
            width:100px;
            height:100px;
            background:yellow;
        `
        const MyButton=styled(StyledButton)`
            background:red;
        `
        return (
            <div>
                <MyButton></MyButton>
                <StyledButton>1231</StyledButton>
            </div>
        );
    }
}
export default App004;

动画

动画需要引入styled-components中的keyframes

import styled,{keyframes} from 'styled-components';

然后进行定义动画，再通过在单引号中使用${使用该动画}

import React, { Component } from 'react';
import styled,{keyframes} from 'styled-components';
class App005 extends Component {
    render() {
        //1.定义动画
        const myaniamtion=keyframes`
        from{
            transform:rotate(0deg)
        }
        to{
            transform:rotate(360deg)
        }
        `
        //2.进行使用
        const StyledDiv=styled.div`
            width:100px;
            height:100px;
            background:yellow;
            animation: ${myaniamtion} 1s infinite
        `
        return (
            <div>
                <StyledDiv></StyledDiv>
            </div>
        );
    }
}
export default App005;

这样就学会了Styled-Components

到此这篇关于React styled components样式组件化使用流程的文章就介绍到这了,更多相关React styled components 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！