React框架(十九)在使用style-components的同时引入.css文件

什么是style-components?

style-components是针对React写的一套css in js框架,简单来讲就是在js中写css。相对于与预处理器(sass、less)的好处是,css in js使用的是js语法,不用重新再学习新技术,也不会多一道编译步骤,无疑会加快网页速度。


作者:恰到半生
链接:https://www.jianshu.com/p/27788be90605
来源:简书

剩下的官网自己看https://styled-components.com


问题的出现

在使用了style-components框架之后,所有的样式都被封装为一个个组件,在进行渲染的同时就能使用自定义的样式。

但问题来了!!!

  • react项目不会再识别.css文件(也可能我没有发现两者同时使用的方法)

  • 正常使用webpack打包的React项目,在项目打包成bundle的时候会对代码丑化(uglyfy),因此组件的类名会在打包时被混淆,这也使得添加类名变得繁琐。


如何解?

划重点

把待使用的css文件转换为使用style-components框架的.js文件,然后引入即可。


看个例子——animate的使用

animate其实是封装好的CSS动画,在平时使用时只需要:

下载 — 引入 — 在需要添加动画的标签上添加类名animated xxx

(不详细讨论,自己上GitHub看https://github.com/daneden/animate.css

接下来我们在React项目中,把它变成一个模块来使用

1.animate.css源码长这样
@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

===>>>...略
2.封装

.css文件改为.js文件,代码改成这样:

import {createGlobalStyle} from 'styled-components'; //用于生成处理全局样式
export const Animate=createGlobalStyle`
	原animate.css文件的源码粘贴过来
`;

由于animate需要用于全局动画,所以我用styled-components模块中的createGlobalStyle方法将其封装为全局样式。

3.在主文件中使用

中国人都知道入口文件是App.js
在这里插入图片描述
在里面引用吧:

import ... // 其它必要引用
import {Animate} from "./static/animate";

function App() {
  return (
		<Fragment>
			<Animate/>
			
			{/*其它组件*/}
		</Fragment>
  )
4.肆无忌惮添加类名

比如某个子组件文件index.jsrender函数:

render() {
        return(
            <ServiceWrapper>
                <div className={'animated bounceInUp'}>
                    <InfoSource />
                </div>
			</ServiceWrapper>
		)
}

当然,如果你想在某个组件上添加额外的类名,比如InfoSource上你想用别的类来定义样式,仿照刚刚的方法,把css文件封装成.js文件,在这个index.js文件中引入刚刚封装的组件,在render函数里使用这个组件,完事儿了!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值