css react
您可以通过多种不同的方式为React应用程序编写CSS，我想说的是，与传统的Web应用程序相比，您实际上具有更多的样式来设计React应用程序。
让我们定义其中一些选项：
- 标准CSS
- 内联样式
- CSS模块
- CSS-in-JS
现在，让我们仔细看看其中的每一个。
标准CSS
这是编写CSS的传统方式，也是最常见的方式。 您创建一个style.css文件，在其中添加所有样式，然后导入样式表并通过className或id属性引用JSX中的样式。
请注意，您不必将样式限制在一个样式表中，也可以将它们拆分成多个文件，然后将其放置在应定位的组件旁边。
还要注意，您可以继续使用日常CSS库和框架，例如SASS ， LESS ， Bootstrap ， Semantic UI等等，React也不以任何方式限制您。
内联样式
内联样式是指通过style属性直接在HTML标记内编写CSS。 在React中，使用JSX，如下所示：
<p style = {{{color：“ red”}} >>世界您好</ p>
就样式完整的应用程序而言，内联样式可能是最受限制的方法，因为它们无法利用所有CSS功能，例如伪选择器 ， 动画和媒体查询 。
实际上，它们主要用于基本样式的修改，例如根据条件进行颜色切换，但是我也听说过有人甚至公司将其用作唯一的样式设置机制。
（请注意，可以说，内联样式也可以被视为CSS-in-JS的一部分，因为从技术上讲，您确实是使用React将它们写在JS文件中的。之所以选择将它们归入自己的类别是因为CSS- in-JS库通常比在style属性中编写样式要复杂得多，它们会引入某种更高层次的抽象，正如您在CSS-in-JS部分中所看到的。）
CSS模块
使用CSS模块，您可以使用与“标准CSS”选项相同的样式为每种类型的组件创建CSS文件，但是此处的区别在于，使用CSS模块时，样式在本地范围内，这意味着与“标准CSS”不同，它们不会泄漏到其他组件中 。
样式在本地范围内也意味着您可以忘记实施自己的本地范围策略或遵循诸如BEM之类的方法，这些方法要求您手动创建并键入长类或ID名称。
如何在React中使用：
在模块属性设置为true的情况下，使用webpack.config内的css-loader ，或下载完整的库（例如css-modules） ，设置如下：
- 为您要样式化的任何组件创建一个CSS文件
- 写你CSS
- 将此CSS文件导入目标组件内部
- 通过组件的className和id属性引用这些样式
如何在后台实现CSS模块？
CSS模块的工作方式是获取CSS文件，并通过CSS模块编译器运行它们，该编译器执行以下两项操作：
- 修改CSS文件中的类和/或ID名称以使其唯一
- 产生一个JS文件，其中包含新生成的名称和旧名称之间的映射
因此，为什么可以在CSS模块中使用命名的导入-实际上不是在导入CSS，而是导入由CSS Module编译器生成的JS。
CSS-in-JS
顾名思义，在CSS-in-JS中，您是在JavaScript文件而不是CSS文件中编写CSS，但是，如何编写和应用CSS则很大程度上取决于您使用的特定CSS-in-JS库。
在后台CSS-in-JS通常以以下三种方式之一（或多种方式）实现 ：
- 通过内联样式
- 通过<style>元素
- 通过在构建时通过将样式提取到CSS文件中的<link>元素
为了不使文章过长，我们将只看一个CSS-in-JS实现，即style-components ，它也是其中最受欢迎的实现之一。
但是，在分解其工作方式之前，我们先来看一个示例：
import React, { Component } from "react"; import styled from "styled-components";
const Wrapper = styled.div` max-width: 600px; margin: 0 auto; `;
class HelloWorld extends Component { render() { return ( <Wrapper> <p>Hello World</p> </Wrapper> ); } }
现在让我们分解这个例子。 在顶部，我们声明一个名为Wrapper的变量，并要求styled-components创建并返回一个div 组件 ，该div 组件由我们在反引号内定义的样式组成-在这种情况下，我们要求它提供以下stylesmax的div组件-width：600px; 保证金：0自动;
然后，我们将这个Wrapper组件添加到我们的render方法中，并像常规div一样使用它。
简单来说，您要告诉样式化组件您想要哪种内置组件，以及如何对其进行样式化，样式化组件会为您提供该组件。
样式如何在后台应用？
样式组件依赖于<style>元素，因此在内部，您可以将其视为将<style> 您的样式 </ style>并将其附加到文档的头部。 另外，由于它提供了本地样式范围，因此它负责生成和应用唯一的类名。
为了更好地可视化，让我们运行上面的代码片段，看看添加到DOM后产生的代码：
... <head> ... <style> /* sc-component-id: sc-bdVaJa */ .sc-bdVaJa {} .brPdfu { max-width: 600px; margin: 0 auto; } </style> </head>
... <head> ... <style> /* sc-component-id: sc-bdVaJa */ .sc-bdVaJa {} .brPdfu { max-width: 600px; margin: 0 auto; } </style> </head> <body> <div id="app"> <div class="sc-bdVaJa brPdfu"> <p>Hello World</p> </div> </div> </body> ...
如您所见，它确实看起来像我们期望的样子。 唯一令人惊讶的是多余的空样式声明.sc-bdVaJa {}，它基于其上方的注释/ * sc-component-id：sc-bdVaJa * /似乎建议样式化组件跟踪样式中的哪个组件属于—大概是为了某种内部性能优化或类似的东西。
如果您喜欢自己所看到的内容，则可能还需要签出另一个非常相似CSS-in-JS库Emotion ，它与样式化组件非常相似，但是可以选择将所有样式提取到CSS文件中，在构建时，然后通过<link>元素将其链接到文档中。 为什么这有用？ 因为生成的样式表可以由浏览器缓存。
有关最流行CSS-in-JS解决方案的完整列表，请参见此github存储库。
终点线
祝贺您走到尽头:)，感谢您的阅读，并希望您学到了一些有用的东西。 Twitter： linasmnew 。
翻译自: https://hackernoon.com/how-does-css-fit-into-react-5a4aa4840135
css react
1472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
