React中使用外部样式的3中方式

vboy1010 发布于2019-05-27 17:42 / 3032人阅读

摘要：一关于的认识是一种使用编写样式的处理方案。意味着你不需要关心如何检测和删除那些未使用的代码。支持变量和继承你可以使用变量来设置不同的样式，使用这些不同样式时只需要给样式组件传递一个参数即可。

一、关于css-in-js的认识

1、css-in-js是一种使用 js 编写 css 样式的 css 处理方案。它的实现方案有很多，比如styled-components、polished、glamorous(paypal 开源的，不再维护)、radium、emotion等等。

2、其中最成熟的便是styled-components和emotion。它们真正意义上实现了组件化style，可以说是专门为 react 打造的。

二、styled-components 简介

styled-components是 css-in-js 主流的实现方案，同时也是组件化style的主流实现方案。

下面是styled-components的一些特性：

1、唯一class类名：和 css-module 异曲同工，生成唯一类名，避免重复和全局污染，也不需要你费脑筋思考该如何命名。

2、无冗余css代码：它的样式和组件绑定，组件调用则样式起作用。意味着你不需要关心如何检测和删除那些未使用的 css 代码。

3、动态样式：它可以很简单地调整和拓展组件的样式，而不需要建立很多个 class 类来维护组件的样式。

4、自动添加兼容前缀：和 Autoprefixer 类似，会自动添加浏览器兼容前缀以支持旧版浏览器。

5、支持变量和继承：你可以使用变量来设置不同的样式，使用这些不同样式时只需要给样式组件传递一个参数即可。

三、styled-components使用方式

1、安装

npm install styled-components

2、使用

styled-components主要基于 es6 的标签模板语法调用标签函数

import React, { Component } from "react"
import styled from "styled-components"

export default class Style extends Component {
  render() {
    return (
      <>
        <div>
          <Title>我是标题Title>
        div>
      
    )
  }
}

// 使用es6的模板字符串的方式(下面表示定义了h1的样式)
const Title = styled.h1`
  font-size: 20px;
  color: #f00;
`

3、嵌套的使用

import React, { Component } from "react"
import styled from "styled-components"

export default class Style extends Component {
  render() {
    return (
      <>
        <div>
          <Content>
            <h2>你好h2>
            <div className="content">我是内容div>
          Content>
        div>
      
    )
  }
}

const Content = styled.div`
  width: 100%;
  height: 500px;
  border: 1px solid #f00;
  > h2 {
    color: pink;
  }
  > .content {
    text-align: center;
    color: #f00;
  }
`

4、使用props传递参数的方式

import React, { Component } from "react"
import styled, { css } from "styled-components"

export default class Style2 extends Component {
  render() {
    return (
      <div>
        <Button> 提交 Button>
        <Button primary> 提交 Button>
      div>
    )
  }
}

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 5px;
  color: palevioletred;
  border: 2px solid palevioletred;
  cursor: pointer;

  ${props =>
    props.primary &&
    css`
      border: 2px solid mediumseagreen;
      color: mediumseagreen;
    `}
`

5、样式的继承

import React, { Component } from "react"
import styled from "styled-components"

export default class Style3 extends Component {
  render() {
    return (
      <div>
        <Button> 提交 Button>
        <ExtendingButton> 提交 ExtendingButton>
      div>
    )
  }
}

const Button = styled.button`
  background: palevioletred;
  color: white;
`

const ExtendingButton = styled(Button)`
  font-size: 18px;
  padding: 5px 25px;
`

四、使用sass

使用create-react-app创建的项目是支持sass的但是需要自己安装

1、安装

npm install node-sass

2、直接使用

import React, { Component } from "react"
import "./style4.scss"

export default class Style4 extends Component {
  render() {
    return (
      <div>
        <div className="title">我是标题div>
      div>
    )
  }
}

五、使用css-module

使用create-react-app创建的项目,默认情况下就支持css-module

1、样式文件必须以[name].module.css或[name].module.scss的形式命名

2、以变量的形式导入样式文件，比如 import styles from "./style.module.css";

3、className以变量引用的方式添加，比如 className={ styles.title }

import React, { Component } from "react"
import styles from "./Style5.module.scss"

export default class Style5 extends Component {
  render() {
    return (
      <div>
        <div className={styles.title}>我是标题div>
      div>
    )
  }
}

<div class="Style5_title__lsl4D">div>

4、如果不想使用默认的哈希值

:global(.wrap) {
  color: green;
}

// 直接使用
你好

5、样式的继承

.className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className; // 直接继承上面的
  color: yellow;
}

.title {
  composes: className from "./another.css"; // 直接使用外部样式表
  color: red;
}

云服务器 GPU云服务器 js中下拉列表的样式 linux中的使用样式表中样式 js中引入外部js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7862.html

如何把 alibaba Rax 组件转换到 React 下

摘要：如何转换知道了二者的不同，那么如何转换我们也就有方向了。因为下每个元件本身就是一个普通的组件，我们可以通过直接把他们当作其他组件转换为的代码来使用。至于如何把这个放到上，我们放到后面一起说。背景最近接手公司的一个移动端项目，是通过 Rax 作为 dsl 开发的，在发布的时候构建多分代码，在 APP 端编译为能够运行在 weex 上的代码，在 H5（跑在浏览器或者 webview 里面...

Hydrogen 2019-08-26 10:56 评论0 收藏0
《慕课React入门》总结

摘要：入门与实战组件虚拟的概念这是性能高效的核心算法为此引入了虚拟的机制。这个过程是自动完成的。实际上是改变了样式文件中类的名称，使其唯一。如果希望使用达到的效果，则需要做件事情服务器支持。 React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM（Virtual DOM）的机制。基于React进行开发时所有的DOM构造都是通...

NotFound 2019-08-21 17:01 评论0 收藏0
《慕课React入门》总结

摘要：入门与实战组件虚拟的概念这是性能高效的核心算法为此引入了虚拟的机制。这个过程是自动完成的。实际上是改变了样式文件中类的名称，使其唯一。如果希望使用达到的效果，则需要做件事情服务器支持。 React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM（Virtual DOM）的机制。基于React进行开发时所有的DOM构造都是通...

zhigoo 2019-08-30 15:53 评论0 收藏0
CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0
CSS常见问题小结

摘要：常见问题小结一行内样式内联样式外部样式行内样式代码写在具体网页中的一个元素内比如一般不需要担心样式优先级与样式覆盖在制作页面的时候需要为很多的标签设置属性，所以会导致页面不够纯净，文件体积过大不利于，后期维护成本高。 CSS常见问题小结一、行内样式、内联样式、外部样式行内样式：代码写在具体网页中的一个元素内；比如：一般不需要担心样式优先级与样式覆盖在制作页面的时...

ivyzhang 2019-08-30 10:48 评论0 收藏0