React使用emotion写css代码

 更新时间:2021年04月08日 09:36:30   作者:joychenke  
这篇文章主要介绍了React如何使用emotion写css代码,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下

简介:

emotion是一个JavaScript库,使用emotion可以用写js的方式写css代码。在react中安装emotion后,可以很方便进行css的封装,复用。使用emotion后,浏览器渲染出来的标签是会加上一个css开头的标识。如下:截图中以css-开头的几个标签,就是使用emotion库后渲染出来的。

下面就从安装到使用,介绍下emotion在工程中的应用。

emotion的安装:

yarn add @emotion/react
yarn add @emotion/styled

新增普通css组件:

1,命名和组件一样,大写字母开头
2,styled后面跟html标签

// 引入emotion
import styled from "@emotion/styled”;
// 使用emotion 创建css组件
const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
`;
//在html代码中使用css组件:
<Container>
// html代码
</Container>

给已存在组件加样式:

1,变量名首字符大写
2,将已经存在的组件作为参数传入styled
3,样式代码可以加参数

// Card 是antd已存在的组件
const ShadowCard = styled(Card)`
    width: 40rem;
    min-height: 56rem;
    padding: 3.2rem 4rem;
    border-radius: 0.3rem;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
    text-align: center;
`;
// 引入的图片,作为参数直接使用
import logo from "assets/logo.svg";

// 反引号可参照魔法字符串传入参数
const Header = styled.header`
background: url(${logo}) no-repeat center;
padding: 5rem 0;
background-size: 8rem;
width: 100%;
`;

提取公共的css组件

1, 反引号之前,接收泛型的参数, 可能用到的参数都要列出来
2, 取传进来的参数,用props来取,比如props.between, 可以用函数返回值给css属性赋值,css属性不渲染,返回值就是undefined

justify-content: ${(props) => (props.between ? "space-between" : undefined)};

3, 可以用css选择器
4,调用时,跟普通js组件一样使用,传参也相同

// 调用Row组件
<HeaderLeft gap={1}> 
//html代码
</HeaderLeft>
const HeaderLeft = styled(Row)``;


// 定义Row组件
export const Row = styled.div<{
  gap?: number | boolean;
  between?: Boolean;
  marginBottom?: number;
}>`
display: flex;
align-items: center;
justify-content: ${(props) => (props.between ? "space-between" : undefined)};

margin-bottom: ${(props) =>

props.marginBottom ? props.marginBottom + "px" : undefined};

> * {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-right: ${(props) =>

typeof props.gap === "number"
    ? props.gap + "rem"
    : props.gap
    ? "2rem"
    : undefined};
}
`;

写emotion行内样式

1,在组件的顶部写上 下面代码,告知当前组件用了emotion行内样式

/* @jsxImportSource @emotion/react */

2,行内样式的格式:css={ /* 行内样式代码 */ }

<Form css={{ marginBottom: "2rem" }} layout={"inline”}>
// html代码
</Form>

以上就是emotion的介绍和使用。(#^.^#)

以上就是React使用emotion写css代码的详细内容,更多关于React用emotion写css代码的资料请关注脚本之家其它相关文章!

相关文章

  • 详解react内联样式使用webpack将px转rem

    详解react内联样式使用webpack将px转rem

    这篇文章主要介绍了详解react内联样式使用webpack将px转rem,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React倒计时功能实现代码——解耦通用

    React倒计时功能实现代码——解耦通用

    这篇文章主要介绍了React倒计时功能实现——解耦通用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 详解各版本React路由的跳转的方法

    详解各版本React路由的跳转的方法

    这篇文章主要介绍了详解各版本React路由的跳转的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • react中Suspense的使用详解

    react中Suspense的使用详解

    这篇文章主要介绍了react中Suspense的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 详解React Native顶|底部导航使用小技巧

    详解React Native顶|底部导航使用小技巧

    本篇文章主要介绍了详解React Native顶|底部导航使用小技巧 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • ReactNative之键盘Keyboard的弹出与消失示例

    ReactNative之键盘Keyboard的弹出与消失示例

    本篇文章主要介绍了ReactNative之键盘Keyboard的弹出与消失示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • React-router v4 路由配置方法小结

    React-router v4 路由配置方法小结

    本篇文章主要介绍了React-router v4 路由配置方法小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 详解Immutable及 React 中实践

    详解Immutable及 React 中实践

    Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。这篇文章主要介绍了Immutable及 React 中的实践,需要的朋友可以参考下
    2018-03-03
  • ReactNative实现Toast的示例

    ReactNative实现Toast的示例

    这篇文章主要介绍了ReactNative实现Toast的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React 使用browserHistory项目访问404问题解决

    React 使用browserHistory项目访问404问题解决

    这篇文章主要介绍了React 使用browserHistory项目访问404问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论