React 中五种常见的样式策略(上)

简介: 今天一起来看看React中实现样式的五种常见策略~

React中的样式策略主要有以下几种:

  • 内联样式: 内联样式就是在JSX元素中,直接定义行内的样式;
  • CSS样式表: 这也是我们最常用的样式策略,使用单独的样式表,使用CSS或者SCSS等来为元素设置样式;
  • CSS模块: CSS模块是一个文件,默认情况下所有类名和动画名都在本地范围;
  • styled-components:这是一个用于React和React Native的样式组件库,它允许我们早应用中使用组件级样式,这些样式就是使用CSS-in-JS的技术来编写的;
  • JSS:JSS是一个CSS创作工具,它允许我们使用JavaScript以声明式、无冲突和可重复的方式来描述样式。


这么说可能有点抽象,下面就来看看这些样式策略分别是怎么使用的,以及它们的优缺点。


1. 内联样式


React中的组件是由JSX元素组件的,虽然编写的不是常规的HTML,但是仍然是可以使用内联样式去定义样式的。与普通的HTML内联样式唯一的区别就是,JSX中的内联样式是一个对象,而不是一个字符串。


下面来看一个简单的例子:

import React from "react";
export default function App() {
  return (
      <h1 style={{ color: "red" }}>Hello World</h1>
  );
}
复制代码


这个组件很简单,上面的style属性中,外面的大括号是用来告诉JSX解析器,括号中的内容是JavaScript,而不是一个字符串。而里面的大括号用来初始化一个对象。

当包含的样式属性中出现多个词时,应该使用驼峰命名,比如text-align属性必须写成textAlign:


import React from "react";
export default function App() {
  return (
      <h1 style={{ textAlign: "center" }}>Hello World</h1>
  );
}
复制代码


由于style属性是一个对象,所以我们也可以将这个对象定义成一个常量来分隔样式,这样就可以根据需要在其他组件上重用它:

import React from "react";
const h1Style = {
  color: 'red',
  textAlign: "center"
}
export default function App() {
  return (
      <h1 style={h1Style}>Hello World</h1>
  );
}
复制代码


如果想要在重用时继续扩展这个样式对象,就可以使用ES6中的扩展运算符来实现:

import React from "react";
const h1Style = {
  color: 'red',
  textAlign: "center"
}
export default function App() {
  return (
      <h1 style={{...h1Style, fontSize: '25px'}}>Hello World</h1>
  );
}
复制代码


除此之外,我们还可以在样式对象中使用变量,这样就能实现样式的动态变化:

import React from "react";
export default function App({themeColor}) {
  const h1Style = {
    color: themeColor,
    textAlign: "center"
  }
  return (
      <h1 style={h1Style}>Hello World</h1>
  );
}
复制代码


这也是内联样式最重要的特性之一。但是,React团队并不推荐使用内联样式。内联样式也是CSS-in-JS技术的最基本的示例。


内联样式的优点:

  • 使用简单: 使用内联样式的好处就是简单的以组件为中心来实现样式的添加;
  • 扩展方便: 通过使用对象进行样式设置,可以方便的扩展对象来扩展样式;
  • 避免冲突: 样式通过对象的形式定义在组件中,避免了和其他样式的冲突。


在大型项目中,内联样式可能并不是一个很好的选择,因为内联样式还是有局限性的:

  • 不能使用伪类: 这意味着 :hover、:focus、:actived、:visited等都将无法使用;
  • 不能使用媒体查询: 媒体查询相关的属性不能使用。
  • 减低代码可读性: 如果使用很多的样式,代码的可读性将大大降低。
  • 没有代码提示:当使用对象来定义样式时,是没有代码提示的,所以如果拼错样式属性,也很难检查出来。


2. CSS样式表


CSS样式表应该是我们最常用的使用定义样式的方式。除了原生的CSS,现在最长使用的还有SASS预处理器来定义样式。这些样式表可以根据需要应用样式的位置来导入到React组件中。

下面来看一个例子:

// style.scss
.box {
  margin: 40px;
  border: 1px solid black;
}
.box-content {
  font-size: 16px;
  text-align: center;
}
复制代码


为了在Box组件中使用这个样式,需要将SASS文件导入:

import React from 'react';
import './style.scss';
const Box = () => (
  <div className="box">
    <p className="box-content"> Hello World </p>
  </div>
);
export default Box;
复制代码


在普通的HTML中,我们会使用class来定义类,而JSX中会使用className来定义,因为class是JavaScript中的一个保留字。


在使用CSS样式表这种样式策略时,我们还可以使用现有的框架,比如Bootstrap等,这些框架提供了现有的类和组件,可以将它们直接插入到React组件中,而不需要为每个元素设置样式。


CSS样式表的优点:

  • 关注分离: 实现了样式和JavaScript的分离,像往常一样编写CSS语法;
  • 使用CSS所有功能: 此方法允许我们使用CSS的任何语法,包括伪类、媒体查询等;
  • 缓存和性能: 标准的CSS文件有利于浏览器优化,在本地缓存文件从而允许重复的方法,以提高性能;
  • 易编写:CSS样式表在书写时会有代码提示;


当然,CSS样式表也是有缺点的:

  • 产生冲突: CSS选择器都具有相同的全局作用域,如果选择器使用错误,有可能造成样式的冲突;
  • 可读性: 如果结构不正确,随着应用程序变得复杂,CSS或者SASS样式表就的很长,并且难以阅读;
  • 难以整理: 随着样式表变得越来越复杂,一些旧的或者未使用的样式属性就很难清理;
  • 没有真正的动态样式: 在CSS表中难以实现动态设置样式。


3. CSS模块


一个CSS模块中所有的类名和动画名默认都是局部范围的CSS文件。在使用CSS模块时,每个React组件都有自己的CSS样式文件,它的使用单位仅限于对应的组件文件。这样,在构建时,就不会产生类名的冲突。

下面来安CSS模块是如何在React中使用的:

//style.css
 :local(.container) {
   margin: 40px;
   border: 2px solid red;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }
复制代码


想要使用:local(.className),就需要在webpack中进行配置才可以使用的。我们可以在webpack中添加对应的加载器:

test: /.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
复制代码


为了在Box组件中使用这个CSS模块,就需要将模块文件导入到组件中进行使用:

import React from 'react';
import styles from './style.css';
const Box = () => (
  <div className={styles.container}>
    <p className={styles.content}> Styling React Components </p>
  </div>
);
export default Box;
复制代码


styles是一个包含在style.css中的样式对象,该对象包含定义的所有类。这就是CSS模块的基本使用方式。


我们还可以使用CSS模块的方式来继承样式,使用composes关键字可以实现样式的继承:

:local(.MediumParagraph) {
  font-size: 20px;
}
:local(.BlueParagraph) {
  composes: MediumParagraph;
  color: blue;
  text-align: left;
}
:local(.GreenParagraph) {
  composes: MediumParagraph;
  color: green;
  text-align: right;
}
复制代码


在CSS模块中,默认会导出本地样式(:local(...)),也可以使用(:global(...))来导出全局样式。本地样式被会编译成唯一标识的类名,而全局样式编译后还是原来的名称。


使用CSS模块的优点:

  • 模块化: 实现样式的模块化,避免样式冲突;
  • SSR时无重复: 在使用服务端渲染(SSR)时没有代码的重复;


使用CSS模块的缺点:

  • 额外的构建工具: 需要额外的构建工具(webpack);
  • 书写麻烦: 本地模块和全局模块书写起来很麻烦;
  • 驼峰命名: 只允许使用驼峰命名。


4. styled-components


Styled Components 是一个使用CSS-in-JS技术实现的样式组件库,它是一个为React和React Native设计的库。它允许我们在应用中使用JavaScript和CSS混合起来编写样式级组件。并且它是支持Sass的,不需要添加任何库。

根据HTTP Archive 的调查显示,在所有CSS-in-JS方案中,Styled Components的使用占到了一半以上:

网络异常,图片无法展示
|


它是使用与CSS 模块的操作方法相同,这是一种编写CSS的方式,该CSS的范围仅限于单个组件,页面中的任何其他元素甚至组件都是无法访问它的。


(1)基本使用

那该如何使用Styled Components库呢?来看看使用步骤: (1)安装库

npm install styled-components --save
复制代码


(2)引入库

import styled from "styled-components";
复制代码


(3)定义样式组件

import React from "react";
import styled from "styled-components";
const Title = styled.h1`
  font-size: 20px;
  text-align: center;
  color: red;
`;
export default function App() {
  return <Title>Hello World</Title>;
}
复制代码


这里就定义了一个样式组件Title,可以看到,它的实现还是非常简单的,语法就是:styled.标签名,后面跟一个模板字符串,其内容就是组件的样式属性。这样就创建了一个带样式的React组件。


(2)样式嵌套

我们还可以在样式组件中嵌套样式,比如:

import React from "react";
import styled from "styled-components";
const Title = styled.div`
  text-align: center;
    img {
        height: 100px;
        width: 200px;
    }
    p {
        font-size: 20px;
    color: red;
    }
`;
export default function App({imgUrl}) {
  return (
    <Title>
        <p>Hello World</p>
        <img src={imgURl} alt="" />
    </Title>
  );
}
复制代码


(3)组件传参

我们还可以给样式组件传递参数:

import React from "react";
import styled from "styled-components";
const Title = styled.div`
  text-align: center;
    img {
        height: 100px;
        width: 200px;
    }
    p {
        font-size: 20px;
    color: ${props => props.color};
    }
`;
export default function App({imgUrl, themeColor}) {
  return (
    <Title>
        <p color={themeColor}>Hello World</p>
        <img src={imgURl} alt="" />
    </Title>
  );
}
复制代码


这样就实现了动态改变文字的颜色。

相关文章
|
2月前
|
前端开发 JavaScript
react 修改 antdesign 的 组件默认样式
react 修改 antdesign 的 组件默认样式
|
4月前
|
前端开发 算法 JavaScript
React-组件-内联样式 和 React-组件-列表渲染优化
React-组件-内联样式 和 React-组件-列表渲染优化
40 0
|
1月前
|
前端开发 容器
第十八章 React中的样式模块化处理
第十八章 React中的样式模块化处理
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
23 0
|
3月前
|
前端开发
react解决页面样式冲突(module)
react解决页面样式冲突(module)
|
4月前
|
前端开发
React-组件-外链样式
React-组件-外链样式
21 0
|
6月前
|
前端开发
前端项目实战拾陆-react-admin路由样式替换antd
前端项目实战拾陆-react-admin路由样式替换antd
39 0
|
6月前
|
前端开发
前端项目实战壹佰贰拾react-admin+material ui-react-admin之SimpleList中rowStyle设置样式
前端项目实战壹佰贰拾react-admin+material ui-react-admin之SimpleList中rowStyle设置样式
27 0
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
25 0
|
6月前
|
前端开发
前端项目实战叁拾陆-​react-admin+material ui-侧边栏样式设定重置
前端项目实战叁拾陆-​react-admin+material ui-侧边栏样式设定重置
42 0

相关产品

  • 云迁移中心