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 样式表这种样式策略时，web前端培训我们还可以使用现有的框架，比如 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 模块的优点：
使用 CSS 模块的缺点：
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> );}
复制代码
这样就实现了动态改变文字的颜色。
（4）样式组件的 class
从上面组件中可以看出，我们定义的样式组件时没有 class 类名的，实际上类名的定义是 style-components 库帮我们完成的，来看一个实际的例子：
const SeniorTitle = styled.h1` width: 100%; height: 29pt; line-height: 29pt; background-color: #E0F2E1; border-radius: 10pt;
span { text-align: center; }
p { font-size: 14pt; color: ${props => props.color}; }`;
复制代码
上面是定义的一个 h1 组件，最终编译后，类名是 css-1d3spwa，其中 span 的样式编译后如下：
.css-1d3spwa span { text-align: center;}复制代码
复制代码
（5）样式组件继承
我们还可以使用其他组件的样式，并继承它们所有的样式（如果有相同的样式，则会覆盖继承来的样式），来看例子：
const BoringButton = styled.button` color: blue; background-color: green；`;
const CoolButton = styled(BoringButton)` color: pink;`;
复制代码
这样，下面的组件就获得了上面组件的样式，并覆盖了重复了样式 color。
（6）使用 css 辅助函数
如果我们需要在多个样式组件中使用通用的样式，css 辅助函数就派上用场了，来看看 css 辅助函数是如何使用的：
import React from "react";import styled, {css} from "styled-components";
const commonStyle = css` color: white; font-size: 20px;`;
const Button = styled.button` ${commonStyle}; background-color: red;`;
const AnotherButton = styled.button` ${commonStyle}; background-color: green;`;
复制代码
这里定义的 commonStyle 在两个 button 组件中使用时，不会有自己单独的类，而是会添加到这两个 button 组件对应的类中。
（7）引用其他样式组件
我们还可以引用其他的样式组件，和继承时是类似的：
const BoringButton = styled.button` color: blue; background-color: green；`;
const CoolButton = styled.div` ${BoringButton} { color: pink; }`;
复制代码
（8）结合 TypeScript 使用样式组件
如果我们项目使用 React + TypeScript 来编写，那么当给样式组件传递 props 时，就可能会报错：
这时我们可以通过泛型的形式给上述组件定义一个 props 类型：
interface ITitleWithoutNumber { paddingRight: string;}
const TitleWithoutNumber = styled.h1<ITitleWithoutNumber>`
`
复制代码
这样就限制了组件 props 的类型，如果想添加一个新的 props 值，就需要先在 interface 接口中增加新的参数及类型。
（9）全局主题
在 style-components 中我们还可以使用全局的主题，它通过 ThemeProvider API 来实现：
import React from "react";import { ThemeProvider } from "styled-components";
const theme = { colors: { powderWhite: "#FFFDF9", persianGreen: "#06B49A", lightBlue: "#AFDBD2", onyx: "#36313D" }, fonts: ["sans-serif", "Roboto"], fontSizes: { small: "1em", medium: "2em", large: "3em" }};
const Theme = ({ children }) => ( <ThemeProvider theme={theme}>{children}</ThemeProvider>);
export default Theme;
复制代码
这里导出了一个 Theme 组件，它提供了一个 theme 主题，供子组件使用，可以这样来使用：
import React from "react";import Theme from "./Theme";import styled from "styled-components";
const Container = styled.div` width: 100%; border: ${props => `1px solid ${props.theme.colors.onyx}`}; background-color: ${props => props.theme.colors.lightBlue}; font-family: ${props => props.theme.fonts[0]};`;
const Heading = styled.h1` font-size: ${({ isHeading, theme: { fontSizes } }) => isHeading ? fontSizes.large : fontSizes.small}; color: ${({ theme: { colors } }) => colors.persianGreen};`;
const App = () => { return ( <Theme> <Container> <Heading isHeading={true}>Hello World</Heading> <h2>styled-components</h2> </Container> </Theme> );};export default App;
复制代码
可以使用这种方式来实现全局的主题。
（10）优点和缺点
style-components 的优点：
开箱即用的 Sass 语法：在 style-components 支持开箱即用的 Sass 语法，而不需要进行额外的安装或设置；
支持使用主题： 在 styled-components 提供了一个 ThemeContext，可以直接传递主题对象的方法，方便使用全局主题；
动态样式： 可以使用 props 来动态的设置和改变样式；
没有类型冲突： 样式组件会我们生成唯一的类名，不会与其他组件的类型产生冲突；
便于维护： 我们不需要在各种样式文件中查看样式，只需要在样式组件中查看其样式即可，便于维护；
style-components 的缺点：
5. JSS
JSS 是一个 CSS 创作工具，它允许我们使用 JavaScript 以生命式、无冲突和可重用的方式来描述样式。它可以在浏览器、服务器端或构建时在 Node.js 中编译。JSS 是一种新的样式策略，它与框架无关，由多个包组成：核心、插件、框架集成等。
在 React 中，可以使用 React-JSS。React-JSS 是一个框架集成，可以在 React 应用程序中使用 JSS。它是一个单独的包，所以不需要安装 JSS 核心，只需要 React-JSS 包即可。React-JSS 使用新的 Hooks API 将 JSS 与 React 结合使用。
下面来将 JSS 和内联样式进行对比。
内联样式：
import React from 'react'
const Button = () => { const buttonGreen = { backgroundColor: "green", border: "1px solid white", borderRadius: "2px" };
return( <button style={buttonGreen}> green </button> )}
复制代码
React-JSS：
import React from 'react'import {createUseStyles} from 'react-jss'
const useStyles = createUseStyles({ buttonGreen: { backgroundColor: "green", border: "1px solid white", borderRadius: "2px" }})
const Button = () => { const {buttonGreen} = useStyles()
return( <button className={buttonGreen}> green </button> )}
复制代码
可以看到，相对于普通的内联样式，React-JSS 的特征如下：
导入了一个 createUseStyles 方法；
通过 createUseStyles 方法方法创建一个 useStyles hook；
通过参数对象的方式将样式传递给 createUseStyles 方法；
通过解析 useStyles hook 的返回值获取到组件样式 buttonGreen；
将 buttonGreen 传递给组件的 className 进行解析。
那如果想要传递 props，两者又会有什么不同的呢？接着来看：
内联组件：
import React from 'react'
const Button = ({backgroundColour, children}) => { const buttonStyles = { backgroundColor: backgroundColour, border: "1px solid white", borderRadius: "2px" };
return( <button style={buttonStyles}> {children} </button> )}
复制代码
React-JSS：
import React from 'react'import {createUseStyles} from 'react-jss'
const useStyles = createUseStyles({ buttonStyles: { backgroundColor: backgroundColour => backgroundColour, border: "1px solid white", borderRadius: "2px" }})
const Button = ({backgroundColour, children}) => { const {buttonStyles} = useStyles(backgroundColour)
return( <button className={buttonStyles}> {children} </button> )}
复制代码
可以通过以下方式来调用上面的组件：
import React from 'react';import Button from 'Button';
const SomePage = () => ( <Button backgroundColour="blue">blue</Button>)
复制代码
这里的区别也是显而易见的，需要将传递的 props 的值传给 useStyles 方法，这样就可以在 createUseStyles 中使用了。这就是 React-JSS 的基本使用了。下面来看看它的优缺点
React-JSS 的优点：
React-JSS 的缺点：
上面介绍了五种常用的 React 样式策略，这五种策略并没有绝对的好或坏，都各有优缺点，可以根据实际的业务场景去使用。
评论