脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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无限滚动组件的实现示例

    react无限滚动组件的实现示例

    本文主要介绍了react无限滚动组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 在React项目中使用Eslint代码检查工具及常见问题

    在React项目中使用Eslint代码检查工具及常见问题

    这篇文章主要介绍了在React项目中使用Eslint代码检查工具及常见问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • react-dnd API拖拽工具详细用法示例

    react-dnd API拖拽工具详细用法示例

    这篇文章主要为大家介绍了react-dnd API拖拽工具的详细用法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • React事件处理过程中传参的实现方法

    React事件处理过程中传参的实现方法

    这篇文章主要介绍了React事件处理过程中传参的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • 一文理解Redux及其工作原理

    一文理解Redux及其工作原理

    这篇文章主要介绍了一文理解R通过围绕主题展开详细edux及其工作原理，文章通过主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • React 事件绑定的实现及区别

    React 事件绑定的实现及区别

    事件绑定也是其中一部分内容,通过事件委托和事件合成,React 在内部对事件进行优化和处理,减少了事件处理函数的调用次数,从而提升了性能,本文主要介绍了React事件绑定的实现及区别,感兴趣的可以了解一下
    2024-03-03
  • React-Native实现ListView组件之上拉刷新实例（iOS和Android通用）

    React-Native实现ListView组件之上拉刷新实例（iOS和Android通用）

    本篇文章主要介绍了React-Native实现ListView组件之上拉刷新实例（iOS和Android通用），具有一定的参考价值，有兴趣的可以了解一下
    2017-07-07
  • 使用 Rails API 构建一个 React 应用程序的详细步骤

    使用 Rails API 构建一个 React 应用程序的详细步骤

    这篇文章主要介绍了使用 Rails API 构建一个 React 应用程序的详细步骤，主要包括后端：Rails API部分，前端：React部分及React组件的相关操作，具有内容详情跟随小编一起看看吧
    2021-08-08
  • 详解react-native WebView 返回处理(非回调方法可解决)

    详解react-native WebView 返回处理(非回调方法可解决)

    这篇文章主要介绍了详解react-native WebView 返回处理(非回调方法可解决)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React 使用recharts实现散点地图的示例代码

    React 使用recharts实现散点地图的示例代码

    这篇文章主要介绍了React 使用recharts实现散点地图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论