聊一聊 React 中的 CSS 样式方案

和 Angular,Vue 差别,React 并没有如何在 React 中誊写样式的官方方案,依赖的是社区众多的方案。社区中提供的方案有许多,例如 CSS Modules,styled-components,styles jsx 等等。

接下来会详细地说一下这几种方案,在说这几种方案之前,首先说一下 React 官方提供的构建工具 create-react-app 构建的项目中使用 css 的问题。

使用 create-react-app 建立的项目引入 css 文件的问题

使用 create-react-app 构建一个项目之后,会有 index.js,index.css,App.js 等文件,为了说明问题我又新建了一个 App1.js 文件,为了简捷文件内容让我删除改动了一些。

index.css

.huisiyuan {
  background: red
}

index.js

import App from './App';
import App1 from './App1';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <App1 />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React, { Component } from 'react';
class App extends Component {
	render() {
		return <div className='huisiyuan'>组件App</div>
	}
}
export default App;

App1.js

import React, { Component } from 'react';
class App1 extends Component {
	render() {
		return <div className='huisiyuan'>组件App1</div>
	}
}
export default App1;

index.js 中引入的 index.css 在浏览器中是泛起在 head 标签下的 style 标签下,因此任何在 index.js 中使用的组件都可以使用 index.css 中的样式。

聊一聊 React 中的 CSS 样式方案

例如想让组件 App 的靠山颜色为红色,index.css 中正好是这样设置的,然则 App1 中的靠山颜色也会随着酿成红色。

聊一聊 React 中的 CSS 样式方案

说明晰 creat-react-app 建立项目后直接使用 import 引入 css 文件泛起的问题,接下来讲一下社区中提供的种种方案。

CSS Modules

CSS Modules 的焦点

CSS Modules更详细的先容可以参考阮一峰先生 CSS Modules 用法教程

由于CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有用,这可能会导致大量的冲突。例如,若是我有两个css文件,它们的中的一些样式名是一样的,那么就会被笼罩,简朴的解决办法就是将样式的命名变得庞大且不重复,但这样样式多了也很难制止重复,且命名变得庞大。

CSS Modules 就解决了这个问题,在一个组件中引入的类经由构建工具编译之后会酿成举世无双的哈希字符串.

下面是一个 App 组件

import React, { Component } from 'react';
import xxx from 'index.css';

class App extends Component {

	render() {
		return <div className={xxx.huisiyuan}>组件App</div>
	}

}

export default App;

和上面引入 css 文件差别的是,这里将 index.css 文件输入到 xxx 工具,xxx.huisiyuan 代表一个 class。

.huisiyuan {
  background: red;
}

构建工具会将 xxx.huisiyuan 编译成一个哈希字符串,同样 index.css 文件中的 .huisiyuan 也将被编译成同样的哈希字符串,这样这个类名就举世无双了。

这样这个类就有了局域的观点,其它组件不引入使用这个 index.css 文件就不会应用到这个类的样式,由于编译后的哈希字符串其它组件是不知道的。

一样平常情况下,

局部样式文件 全局样式文件
命名方式 xxx.module.css xxx.css
引入方式 import xxx from ‘./xxx.mouule.css’ import ‘./xxx.css’
用法 huisiyuan huisiyuan

styled-components

styled-components 见名知义就是一个带样式的组件。

React 的一个理念就是 all in JS,styled-components 将样式直接写入到组件中,获得的是一个样式的组件,在挪用组件时是带着样式的。

Styled Component是react的一个第三方库,是CSS in JS 的优异实践和代表,将CSS写在JS中,可以实现通例CSS所欠好处置的逻辑庞大、函数方式、复用、制止滋扰。

defer 链如何被遍历

使用方式:

首先安装 style-components, npm install style-components --save.

下面的代码中 Div 就是一个带样式的组件(带样式的 Div)

import React, { Component } from 'react';
import styled from 'styled-components';

const Div = styled.div`
	color: red;
`;

class App extends Component {

	render() {
		return (
			<div>
				<Div big>hello world</Div>
			</div>
		) 
	}

}

export default App;

右下图可以看出,styled-components 自动给 div 加了一个 class。

聊一聊 React 中的 CSS 样式方案

styled-components 还可以获取到组件的属性,并且在界说样式时举行一些逻辑操作。

const Div1 = styled.div`
	color: red;
	${(props)=> props.big&&`
		font-size: 72px
		`}
`;

const Div2 = styled.div`
	color: blue;
	${(props)=> props.small&&`
		font-size: 30px
		`}
`;

class App extends Component {
	render() {
		return (
			<div>
				<Div1 big>hello world</Div1>
				<Div2 small>hello world</Div2>
			</div>
		) 
	}
}

当 Div1 组件中有 big 属性时会设置 font-size: 72px,效果如下图。

聊一聊 React 中的 CSS 样式方案

styled jsx

见名知义就是带样式的 JSX,一样平常有下面三种形式。

1) 行内样式

行内样式是一种最基本的写法,和在HTML中写的元素内联样式差不多,然则设置的样式是一个工具。

<div style={{color: red, background: blue}}>hello<div/>

为什么要用两个大括号?

由于在JSX中渲染的JS表达式,它们必须被放在一对大括号里,{style}可以视为一个JS工具。以是第一对大括号正是将JS表达式放入JSX剖析,内里的那对大括号则建立了一个style工具实例,以是在这里style是作为一个工具传入组件 。

2)声明样式

声明样式实在是行内样式的一种改善写法,在render函数外部建立style工具,然后传递给组件,让css与标签星散 。

const style = {
	color: red,
	background: blue
}

class App extends Components {
	render() {
		return (
			<div style={style}>hello</div>
		)
	}
}

3)引入样式文件

实在这一种是 CSS Modules 中全局样式文件的应用,在这里再提一下,用法比较简朴就是将样式文件通过 import 语句引入进来,问题就是页面上的所有组件都能应用这个文件中的样式。

App.css

.huisiyuan {
  color: red;
  background: blue;
}

App.js

import React, { Components } from 'react';
import './App.css';
import  App1 from './App1';

class App extends Components {
	render() {
		return (
      <App1 >
		)
	}
}

APP1.js

import React, { Components } from 'react'; 

class App1 extends Components {
	render() {
		return (
      <div className='huisiyuan'>hello</div>
		)
	}
}

在 App.js 中引入了 App.css 然则在 App1.js 中·并没有引入,然则在 App1 组件内部依然可以使用 App.css 中的样式,App1 组件中hello 应用 App.css 中的样式,如下图所示。

聊一聊 React 中的 CSS 样式方案

总结:

上面总结的三种方式,推荐使用 CSS Modules 或者 styled-components,在平时做一些小 demo 的时刻可以使用 styled jsx 的方式。

完,若有不适当之处迎接指正哦。

原创文章,作者:28x29新闻网,如若转载,请注明出处:https://www.28x29.com/archives/2215.html