Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 2885|回复: 0

styled-components:解决react的css无法作为组件私有样式的问题

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-9-8 13:15:07 | 显示全部楼层 |阅读模式

    react中的css在一个文件中导入,是全局的,对其他组件标签都会有影响。

    使用styled-components第三方模块来解决,并且styled-components还可以将标签和样式写到一起,作为一个有样式的组件,这样样式就是这个组件的私有样式,不会给其他组件造成影响,也很方便。

    下包:

    npm i styled-components

    公共类的写法如下:把.css文件改为.js文件,代码如下:

    import {createGlobalStyle} from 'styled-components';
    export const GlobalStyled = createGlobalStyle`
    html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure, 
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }`

    再将公共的css组件放入到App根组件中,这样style.js中的css样式全局通用了

    import React from 'react';
    import {GlobalStyled} from './style.js';
    import Header from './common/header'
    function App() {
      return (
        <div className="App">
          <GlobalStyled/>
          <Header/>
        </div>
      );
    }
    
    export default App;

    组件的私有类,写法如下:注意下导入写法

    import styled from 'styled-components'
    import logoPic from '../../statics/jianshulogo.png'
    export const HeaderWrapper = styled.div`
        position: relative;
        height: 56px;
        border-bottom: 1px solid #f0f0f0;
    `
    
    export const Logo = styled.a`
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100px;
        height: 56px;
        background: url(${logoPic});
        background-size: contain;
    `

    有样式的组件,哪里需要放哪里就行了,styled-components构造出来的组件,一般react标签有的属性,组件都有, 不过react标签中ref属性,在styled组件中是用innerRef。

    import React,{Component} from "react"
    import {HeaderWrapper,Logo} from "./style"
    
    class Header extends Component {
        render(){
            return (
                <HeaderWrapper>
                    <Logo href="/"></Logo>
                </HeaderWrapper>
     )
        }
    }
    
    export default Header

    也可以把属性写到组件内,如下:

    export const Logo = styled.a.attr({
        href: '/'
    })`
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100px;
        height: 56px;
        background: url(${logoPic});
        background-size: contain;
    `

     

     再注意一个问题,之前学习配置webpack的时候,我们知道.css,.less,sacs等样式文件,webpack配置后是可以将其解析的,像background:url(),根据路径webpack会打包图片也是没有问题的,但是这里用styled-components,是不会解析background:url(),不会解析路径,获取图片的,而只是当成一个路径字符串,返回到网页中去

    例如如下图的代码:

     

     网页中返回的是一个路径字符串,webpack并没有帮我们把图片打包出来, 如下图,当然localhost:3000是没有上一级目录的,找不到图片的

     

     所以这时候我们需要手动导入图片

    import styled from 'styled-components' import logoPic from '../../statics/jianshulogo.png'
    export const HeaderWrapper = styled.div`
        position: relative;
        height: 56px;
        border-bottom: 1px solid #f0f0f0;
    `
    
    export const Logo = styled.a`
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100px;
        height: 56px;
        background: red url(${logoPic})
    `

     

     

     

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-12-13 07:56 , Processed in 1.077173 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表