React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react中引入css

说说react中引入css的方式有哪些并区别在哪

作者:谟渔

本文主要介绍了说说react中引入css的方式有哪些并区别在哪,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

组件式开发选择合适的css解决方案尤为重要

通常会遵循以下规则:

在这一方面,vue使用css起来更为简洁:

而在react中,引入CSS就不如Vue方便简洁,其引入css的方式有很多种,各有利弊

方式

常见的CSS引入方式有以下:

在组件内

直接在组件中书写css样式,通过style属性直接引入,如下:

import React, { Component } from "react";

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  //驼峰法
  minHeight: "200px",
  boxSizing: "border-box"
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
     <div>
       <div style={div1}>123</div>
       <div style={{backgroundColor:"red"}}>
     </div>
    );
  }
}

export default Test;

上面可以看到,css属性需要转换成驼峰写法 这种方式优点:

缺点:

组件中引入css文件

css单独写在一个css文件中,然后在组件中直接引入

App.css文件:

.title {
  color: red;
  font-size: 20px;
}

.desc {
  color: green;
  text-decoration: underline;
}

组件中引入:

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">我是App的标题</h2>
        <p className="desc">我是App中的一段文字描述</p >
        <Home/>
      </div>
    )
  }
}

这种方式存在不好的地方在于样式是全局生效,样式之间会互相影响

组件中引入 .module.css 文件

css文件作为一个模块引入,这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件

这种方式是webpack特工的方案,只需要配置webpack配置文件中modules:true即可

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.module.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">我是App的标题</h2>
        <p className="desc">我是App中的一段文字描述</p >
        <Home/>
      </div>
    )
  }
}

这种方式能够解决局部作用域问题,但也有一定的缺陷:

CSS in JS

CSS-in-JS, 是指一种模式,其中CSS由 JavaScript生成而不是在外部文件中定义

此功能并不是 React 的一部分,而是由第三方库提供,例如:

下面主要看看styled-components的基本使用

本质是通过函数的调用,最终创建出一个组件:

基本使用如下:

创建一个style.js文件用于存放样式组件:

export const SelfLink = styled.div`
  height: 50px;
  border: 1px solid red;
  color: yellow;
`;

export const SelfButton = styled.div`
  height: 150px;
  width: 150px;
  color: ${props => props.color};
  background-image: url(${props => props.src});
  background-size: 150px 150px;
`;

引入样式组件也很简单:

import React, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     &lt;div&gt;
       &lt;SelfLink title="People's Republic of China"&gt;app.js&lt;/SelfLink&gt;
       &lt;SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}&gt;
          SelfButton
        &lt;/SelfButton&gt;
     &lt;/div&gt;
    );
  }
}

export default Test;
复制代码

区别

通过上面四种样式的引入,可以看到:

至于使用react用哪种方案引入css,并没有一个绝对的答案,可以根据各自情况选择合适的方案

到此这篇关于说说react中引入css的方式有哪些并区别在哪的文章就介绍到这了,更多相关react中引入css内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文