在React里面的多种使用CSS的方法

我们都熟悉将样式表链接到HTML文档 <head> 的标准方法，这只是我们编写CSS的几种方法之一。但是在单页应用程序（SPA）中设置样式是什么样子的，比如 React ？

事实证明有很多种办法，有些办法和传统的类似，则有些办法是React的个例。

导入外部样式表

顾名思义，React 可以导入 CSS 文件。这个过程类似于我们在HTML `<head>` 中链接CSS文件的方式

在项目目录中创建一个新的 CSS 文件。
编写 CSS。
导入到 React 文件中。

import "./style.css";

这种导入方式一般都在文件最顶端。

import { React } from "react";  
import "./Components/css/App.css";  
function App() {  
  return (  
    <div className="main">  
    </div>  
  );  
}  
export default App;

在上面代码里，将 CSS 文件导入到 App.js /Components/css 文件夹中。

编写内联样式

看到这个方式，你肯定会提到 “内联样式不方便维护”等之类的话。但在React里，我感觉可维护性不是个问题。这是 React 中内联样式的一个超级简单的例子：

<div className="main" style={{color:"red"}}>

但是我觉得更好的一个方法是创建对象，统一管理。

import { React } from "react";  
function App() {  
  const styles = {  
    main: {  
      backgroundColor: "#f1f1f1",  
      width: "100%",  
    },  
    inputText: {  
      padding: "10px",  
      color: "red",  
    },  
  };  
  return (  
    <div className="main" style={styles.main}>  
      <input type="text" style={styles.inputText}></input>  
    </div>  
  );  
}  
export default App;

使用 CSS 模块

CSS Modules CSS 模块...它们具有局部范围变量的优点，可以与 React 一起使用。但是，它们到底是什么？

引用官方文档：

CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you’ve used in the files to the globally-safe output CSS.
CSS 模块的工作原理是将单个 CSS 文件编译为 CSS 和数据。CSS输出是正常的全局CSS，可以直接注入浏览器或连接在一起并写入文件以供生产使用。数据用于将您在文件中使用的人类可读名称映射到全局安全的输出 CSS。

简单来说，CSS 模块允许我们在多个文件中使用相同的类名而不会发生冲突，因为每个类名都被赋予了唯一的编程名称。这在较大的应用程序中特别有用。每个类名的范围都在本地限定为要在其中导入它的特定组件。

CSS 模块样式表类似于常规样式表，只是扩展名不同（例如 styles.module.css ）。以下是它们的设置方式：

创建一个扩展名的文件 .module.css 。
将该模块导入 React 应用程序（如我们之前看到的）
向元素或组件添加， className 并从导入的样式中引用特定样式。

/* styles.module.css */  
.font {  
  color: #f00;  
  font-size: 20px;  
}  
  
import { React } from "react";  
import styles from "./styles.module.css";  
function App() {  
  return (  
    <h1 className={styles.heading}>Hello World</h1>  
  );  
}  
export default App;

使用样式化组件

样式化组件？它可以在JavaScript中使用实际CSS构建自定义组件。样式化组件基本上是一个 React 组件，具有单独样式。一些功能包括唯一的类名，动态样式和更好的CSS管理，因为每个组件都有自己单独的样式。

在命令行中安装样式化的组件 npm 包：

npm install styled-components

导入 React 应用程序：

import styled from 'styled-components'

创建组件并为其指定样式属性。请注意在 Wrapper 对象中使用由反引号表示的模板文本：

import { React } from "react";  
import styled from "styled-components";  
function App() {  
  const Wrapper = styled.div`  
    width: 100%;  
    height: 100px;  
    background-color: red;  
    display: block;  
  `;  
  return <Wrapper />;  
}  
export default App;