重学React之样式

zhang_glitch
310 阅读3分钟

下面这篇文章，我们来介绍一下，react中支持的样式写法

内联样式

内联样式是官方推荐的一种css样式的写法：

  • style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串。
  • 并且可以引用state，props中的状态来设置相关的样式。 内联样式的优点:
  • 内联样式, 样式之间不会有冲突
  • 可以动态获取当前state,props中的状态 内联样式的缺点：
  • 写法上都需要使用驼峰标识
  • 某些样式没有提示
  • 大量的样式, 代码混乱
  • 某些样式无法编写(比如伪类/伪元素) 所以官方依然是希望内联合适和普通的css来结合编写。

普通的css

普通的css我们通常会编写到一个单独的文件，之后再进行引入。这样的编写方式和普通的网页开发中编写方式是一致的。

如果我们按照普通的网页标准去编写，那么也不会有太大的问题。但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响。但是普通的css都属于全局的css，样式之间会相互影响。这种编写方式最大的问题是样式之间会相互层叠掉。

css modules

css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。但是，如果在其他项目中使用个，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。

React的脚手架已经内置了css modules的配置：

  • .css, .less, .scss 等样式文件都修改成 .module.css, .module.less, .module.scss 等。之后就可以引用并进行使用。通过模块.class即可。 css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案。 image.png
    // about/index.js
    import React, { PureComponent } from 'react'
    import style from './style.module.css'
    export default class About extends PureComponent {
      render() {
        return (
          <div id={style.styleColor} className={style.font}>
            About
          </div>
        )
      }
    }

    // about/style.module.css
    #styleColor {
      color: blue;
    }

    .font {
      font-size: 50px;
    }

    // home/index.js
    import React, { PureComponent } from 'react'
    import style from './style.module.css'
    export default class Home extends PureComponent {
      render() {
        return (
          <div id={style.styleColor} className={style.font}>
            Home
          </div>
        )
      }
    }

    // home/style.module.css
    #styleColor {
      color: red;
    }

    .font {
      font-size: 30px;
    }

image.png 但是这种方案也有自己的缺陷：

  • 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的。
  • 所有的className都必须使用{style.className} 的形式来编写。
  • 不方便动态来修改某些样式，依然需要使用内联样式的方式。

css in js

CSS-in-JS 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度。

事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态。

当然，这种开发的方式也受到了很多的批评：hackernoon.com/stop-using-…

目前比较流行的CSS-in-JS的库有哪些呢？

  • styled-components
  • emotion
  • glamorous 目前可以说styled-components依然是社区最流行的CSS-in-JS库，所以下面介绍一下styled-components。

具体用法请查看官网

就我个人而言css-modules更适合我，可能css in js没有使用过。但是对于方便程度，依旧是css in js更方便。使用什么就看没有人的习惯了。

antd修改主题

请查看官网

配置路径别名

依旧需要合并webpack配置，所以我们还是需要看## antd修改主题，然后再craco.config.js中设置webpack配置。

或者直接执行npm run eject调出webpack.config.js文件。

const {resolve}  = require("path")

module.exports = {
  webpack: {
    alias: {
      "@": resolve(__dirname, "src"),
      "components": resolve(__dirname, "src/components"),
      "assets": resolve(__dirname, "src/assets") 
    }
  }
};
avatar
文章
阅读
粉丝