首页文章资源工具教程 栏目

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

React中使用CSS

更新日期: 2019-02-18阅读: 3.1k标签: react

第一种: 在组件中直接使用style

不需要组件从外部引入css文件，直接在组件中书写。

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>
     </div>
    );
  }
}
export default Test;

注意事项:
在正常的css中，比如background-color，box-sizing等属性，在style对象div1中的属性中，必须转换成驼峰法，backgroundColor，boxSizing。而没有连字符的属性，如margin，width等，则在style对象中不变。

在正常的css中，css的值不需要用双引号("")，如

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

而在react中使用style对象的方式时。值必须用双引号包裹起来。
这种方式的react样式，只作用于当前组件。


第二种: 在组件中引入[name].css文件

需要在当前组件开头使用import引入css文件。

import React, { Component } from "react";
import TestChidren from "./TestChidren";
import "@/assets/css/index.css";
class Test extends Component {
  constructor(props, context) {
    super(props);
  }
  render() {
    return (
      <div>
        <div className="link-name">123</div>
        <TestChidren>测试子组件的样式</TestChidren>
      </div>
    );
  }
}
export default Test;

这种方式引入的css样式，会作用于当前组件及其所有后代组件。


第三种: 在组件中引入[name].scss文件

引入react内部已经支持了后缀为scss的文件，所以只需要安装node-sass即可，因为有个node-sass，scss文件才能在node环境上编译成css文件。

>yarn add node-sass

然后编写scss文件

//index.scss
.App{
  background-color: #282c34;
  .header{
    min-height: 100vh;
    color: white;
  }
}

关于如何详细的使用sass，请查看sass官网
这种方式引入的css样式，同样会作用于当前组件及其所有后代组件。


第四种: 在组件中引入[name].module.css文件

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

import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.css";
class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
  render() {
    return (
     <div>
       <div className={moduleCss.linkName}>321321</div>
       <TestChild></TestChild>
     </div>
    );
  }
}
export default Test;

这种方式可以看做是前面第一种在组件中使用style的升级版。完全将css和组件分离开，又不会影响其他组件。


第五种: 在组件中引入 [name].module.scss文件

类似于第四种，区别是第四种引入css module，而这种是引入 scss module而已。

import React, { Component } from "react";
import TestChild from "./TestChild";
import moduleCss from "./test.module.scss";
class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
  render() {
    return (
     <div>
       <div className={moduleCss.linkName}>321321</div>
       <TestChild></TestChild>
     </div>
    );
  }
}
export default Test;

同样这种方式可以看做是前面第一种在组件中使用style的升级版。


第六种: 使用styled-components

需要先安装

>yarn add styled-components

然后创建一个js文件(注意是js文件，不是css文件)

//style.js
import styled, { createGlobalStyle } from "styled-components";
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;
`;

 

组件中使用styled-components样式

import React, { Component } from "react";
import { SelfLink, SelfButton } from "./style";
class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
  render() {
    return (
     <div>
       <SelfLink title="People‘s Republic of China">app.js</SelfLink>
       <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
          SelfButton
        </SelfButton>
     </div>
    );
  }
}
export default Test;

这种方式是将整个css样式，和html节点整体合并成一个组件。引入这个组件html和css都有了。它的好处在于可以随时通过往组件上传入 属性，来动态的改变样式。对于处理变量、媒体查询、伪类等较方便的。
这种方式的css也只对当前组件有效。具体用法，请查看styled-components官网。


第七种: 使用radium

需要先安装

>yarn add radium

然后在react组件中直接引入使用

import React, { Component } from "react";
import Radium from ‘radium‘;
let styles = {
  base: {
    color: ‘#fff‘,
    ‘:hover‘: {
      background: ‘#0074d9‘
    }
  },
  primary: {
    background: ‘#0074D9‘
  },
  warning: {
    background: ‘#FF4136‘
  }
};
class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
  render() {
    return (
     <div>
      <button style={[ styles.base, styles.primary ]}>
        this is a primary button
      </button>
     </div>
    );
  }
}
export default Radium(Test);

对于处理变量、媒体查询、伪类等是不方便的。使用Radium可以直接处理变量、媒体查询、伪类等，并且可以直接使用js中的数学，连接，正则表达式，条件，函数等。
具体用法请查看radium源码
注意：在export之前，必须用Radium包裹。


链接: https://fly63.com/article/detial/2052

上一页:  如何做一个听话的输入框下一页:  缺这项能力，做不了技术管理工作

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下，尽管现在的 jQuery 已不再那么流行，但 jQuery 的设计思想还是非常值得致敬和学习的，特别是 jQuery 的插件化。

React深度编程：受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多，有些人觉得它可有可不有，也不在意。这恰恰显示React的威力，满足不同规模大小的工程需求。

React框架学习_关于React两种构建应用方式选择

一般在传统模式下，我们构建前端项目很简单。就是下载各种js文件，如JQuery、Echart等，直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站，可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

React创建组件的三种方式及其区别

React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

react生命周期详解_深入理解React生命周期

React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期，它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,，表示有限个状态以及在这些状态之间的转移和动作行为的模型。

React + Webpack 构建打包优化

React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库，去除 import 引用,按需打包所用的类库，比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面：构建速度慢,打包后的文件体积过大

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值，有关React和React Router 。react router中页面传值的三种方法：props.params、query、state

react 高阶组件的 理解和应用

react 高阶组件简单的理解是：一个包装了另一个基础组件的组件。高阶组件的两种形式：属性代理（Props Proxy）、反向继承 (Inheritance Inversion)

react中的refs属性的使用方法

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!