React引入CSS的方式及其区别

前端

2024-01-21 11:09:08

前言

在组件式开发中，选择合适的CSS解决方案尤为重要。通常会遵循以下规则：

可以编写局部CSS，不会随意污染其他组件内的原生；
可以编写动态的CSS，可以获取当前组件的一些状态，根据状态的变化生成不同的CSS样式。

在React中，有以下几种引入CSS的方式：

局部CSS
全局CSS
内联CSS
第三方库

局部CSS

局部CSS是指只作用于当前组件的CSS样式。这种方式可以避免样式污染，使组件更加独立和可复用。

在React中，可以使用以下两种方式编写局部CSS：

使用CSS Modules
使用Styled Components

CSS Modules

CSS Modules是一种CSS预处理器，它可以将CSS样式封装成一个个模块，每个模块只对当前组件有效。

// CSS Modules
import styles from './component.module.css';

const Component = () => {
  return <div className={styles.container}>...</div>;
};

Styled Components

Styled Components是一个CSS-in-JS库，它允许你使用JavaScript来编写CSS样式。

// Styled Components
import styled from 'styled-components';

const Container = styled.div`
  ...
`;

const Component = () => {
  return <Container>...</Container>;
};

全局CSS

全局CSS是指对整个应用程序生效的CSS样式。这种方式可以用来设置一些基础样式，比如字体、颜色、间距等。

在React中，可以使用以下两种方式编写全局CSS：

使用<style>标签
使用CSS文件

<style>标签

// <style>标签
const styles = `
  body {
    font-family: sans-serif;
    background-color: #fff;
  }
`;

const App = () => {
  return (
    <div>
      <style>{styles}</style>
      ...
    </div>
  );
};

CSS文件

// CSS文件
import './global.css';

const App = () => {
  return (
    <div>
      ...
    </div>
  );
};

内联CSS

内联CSS是指直接将CSS样式写在HTML元素的style属性中。这种方式简单方便，但可维护性较差，不建议在大型项目中使用。

// 内联CSS
const Component = () => {
  return <div style={{ color: 'red' }}>...</div>;
};

第三方库

除了上述几种方式，还可以使用第三方库来引入CSS。这些库提供了更加强大的功能，可以帮助你编写更加灵活和可维护的CSS样式。

常用的第三方库包括：

Styled Components
Emotion
Aphrodite
JSS
CSS Modules

这些库的具体用法可以参考它们的官方文档。

比较

下表对上述几种引入CSS的方式进行了比较：

方式	优点	缺点
局部CSS	避免样式污染，使组件更加独立和可复用	需要使用预处理器或CSS-in-JS库
全局CSS	可以用来设置一些基础样式	容易造成样式污染
内联CSS	简单方便	可维护性差，不建议在大型项目中使用
第三方库	提供更加强大的功能，可以帮助你编写更加灵活和可维护的CSS样式	需要学习新的库