脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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-native弹窗封装的方法

    react-native弹窗封装的方法

    这篇文章主要为大家详细介绍了react-native弹窗封装的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 记一次react前端项目打包优化的方法

    记一次react前端项目打包优化的方法

    这篇文章主要介绍了记一次react前端项目打包优化的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • react:swr接口缓存案例代码

    react:swr接口缓存案例代码

    useSWR 是一个 React Hooks,是 HTTP 缓存库 SWR 的核心方法之一,SWR 是一个轻量级的 React Hooks 库,通过自动缓存数据来实现 React 的数据获取,本文给大家介绍react:swr接口缓存案例详解,感兴趣的朋友一起看看吧
    2023-11-11
  • react路由基础解读(Router、Link和Route)

    react路由基础解读(Router、Link和Route)

    这篇文章主要介绍了react路由基础解读(Router、Link和Route)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • react配置路由前缀问题及解决

    react配置路由前缀问题及解决

    在使用 React 配置路由前缀时,需要注意两点：首先,确保资源使用相对路径,可以通过在 `package.json` 中添加 `homepage` 选项或设置确定的前缀来实现；其次,对于 React Router,也需要配置相同的前缀,以确保前端跳转时能够匹配到正确的路由
    2026-03-03
  • React中setTimeout获取不到最新State值的原因及解决方案

    React中setTimeout获取不到最新State值的原因及解决方案

    在 React 开发中,我们常常需要在异步操作中访问组件的 State,然而,由于 React 的闭包机制和异步更新特性,setTimeout 中可能会获取到过时的 State 值,本文将深入解析这一现象的原因,并提供多种解决方案,需要的朋友可以参考下
    2025-10-10
  • React引入css的几种方式及应用小结

    React引入css的几种方式及应用小结

    这篇文章主要介绍了React引入css的几种方式及应用小结,操作styled组件的样式属性,可在组件标签上定义属性、也可以通过attrs定义属性,本文通过实例代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • react-native中ListView组件点击跳转的方法示例

    react-native中ListView组件点击跳转的方法示例

    ListView作为React Native的核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表。下面这篇文章主要给大家介绍了关于react-native中ListView组件点击跳转的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • React中阻止事件冒泡的问题详析

    React中阻止事件冒泡的问题详析

    这篇文章主要给大家介绍了关于React中阻止事件冒泡问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-04-04
  • react的 useReducer 使用场景及替代 useState

    react的 useReducer 使用场景及替代 useState

    useStateuseReducer是 React 提供的状态管理 Hook,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2026-05-05

最新评论