脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React styled components

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

 更新时间：2023年02月06日 09:47:12   作者：碰磕  
styled-components 是react的一个第三方库，一种css私有化的方式。用来实现CSS in JS 的方式之一。在多人协作中，css必定会出现命名冲突，与vue的scoped解决方案不同，react用styled-components的给类名加了随机字符的方式实现了css的私有化

将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 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React 保留和重置State

    React 保留和重置State

    这篇文章主要为大家介绍了React 保留和重置State实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • React如何避免重渲染

    React如何避免重渲染

    这篇文章主要介绍了React如何避免重渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • react在安卓中输入框被手机键盘遮挡问题的解决方法

    react在安卓中输入框被手机键盘遮挡问题的解决方法

    这篇文章主要给大家介绍了关于react在安卓中输入框被手机键盘遮挡问题的解决方法，文中通过图文以及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧
    2018-09-09
  • React Ref Callback使用场景最佳实践详解

    React Ref Callback使用场景最佳实践详解

    这篇文章主要为大家介绍了React Ref Callback使用场景最佳实践详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • React组件refs的使用详解

    React组件refs的使用详解

    这篇文章主要介绍了React组件refs的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • react  Suspense工作原理解析

    react  Suspense工作原理解析

    这篇文章主要为大家介绍了react  Suspense工作原理解析以及基本应用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • React Hooks 实现和由来以及解决的问题详解

    React Hooks 实现和由来以及解决的问题详解

    这篇文章主要介绍了React Hooks 实现和由来以及解决的问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 浅谈react.js中实现tab吸顶效果的问题

    浅谈react.js中实现tab吸顶效果的问题

    下面小编就为大家带来一篇浅谈react.js中实现tab吸顶效果的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React配置代理方式(proxy)

    React配置代理方式(proxy)

    这篇文章主要介绍了React配置代理方式(proxy),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • React Native系列之Recyclerlistview使用详解

    React Native系列之Recyclerlistview使用详解

    这篇文章主要为大家介绍了React Native系列之Recyclerlistview使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10

最新评论