react 改变css样式_React中的样式化：从外部CSS到样式化组件

React中的样式化:从外部CSS到样式化组件，要获得一个高质量、深入的介绍，您不能超越加拿大的全栈开发人员Wes Bos。在这里尝试他的课程，并使用代码SITEPOINT获得25%的折扣，并帮助支持SITEPOINT。虽然使用React构建应用程序的许多方面在一定程度上已经标准化，但样式化仍然是一个有许多竞争性选项的领域。每种方法都有其优缺点，而且没有明确的最佳选择。JavaScript样式的演变，CSS的最初发布是在1996年，自那以后没有什么变化。在第三个主要版本中(第四个即将发布)，它通过添加新特性继续增长，并保持了作为基本web技术的声誉。CSS将永远是web组件样式化的黄金标准，但是它的使用方式每天都在变化。从我们可以建立一个网站的日子，从分割的图像，到定制的，手工滚动的CSS可以反映与图像一样的时代，CSS实现的演变已经随着JavaScript和web作为一个平台的移动而增长。自从React在2013年发布以来，组件构建的web应用程序已经成为一种规范。反过来，CSS的实现也受到了质疑。反对在React中使用CSS的主要理由是关注点分离。SoC是一种设计原则，它描述了将程序划分为几个部分，每个部分处理不同的关注点。当开发人员将三种主要的web技术保存在单独的文件中时，主要使用这个原则。

随着React中JSX的引入，这种情况发生了变化。开发团队认为，实际上，我们一直在做的是技术的分离，而不是关注。有人可能会问，既然JSX将标记移动到JavaScript代码中，为什么样式应该是分开的?与分离样式和逻辑不内联样式从CSS文件中移动CSS定义。这就消除了导入文件的需要，节省了带宽，但牺牲了可读性、可维护性和样式继承。内联样式从CSS文件中移动CSS定义。这就消除了导入文件的需要，节省了带宽，但牺牲了可读性、可维护性和样式继承。CSS模块，button.css，CSS仍然保存在它自己的文件中。然而，当CSS模块与Webpack或其他现代绑定器捆绑在一起时，CSS将作为脚本标记添加到HTML文件中。类名也被散列以提供更细粒度的样式，从而解决了层叠样式表所带来的问题。散列的过程涉及生成唯一的字符串，而不是类名。类名为btn将导致DhtEg散列，从而防止样式级联并将样式应用于不需要的元素。从上面的例子中，我们可以看到CSS模块添加的样式标签元素，以及散列的类名和使用散列的DOM元素。

魅力，Glamor是一个js中的CSS库，它允许我们在与JavaScript相同的文件中声明CSS。Glamor再次对类名进行散列，但提供了一种干净的语法，可以通过JavaScript构建CSS样式表。样式定义是通过JavaScript变量构建的，该变量使用驼峰大小写语法描述每个属性。驼峰大小写的使用非常重要，因为CSS定义了train大小写中的所有属性。主要区别在于属性名的更改。当从应用程序或CSS示例的其他部分复制和粘贴CSS时，这可能是一个问题。例如，overFlowY将被更改为overFlowY。然而，通过这种语法的改变，Glamor支持媒体查询和阴影元素，赋予了我们的风格更多的力量:styled-components。风格组件是一个新的库，重点是保持反应组件和风格在一起。为React和React Native提供一个简洁易用的界面，样式组件不仅改变了实现，还改变了构建样式化React组件的思维过程。一旦安装完毕，就可以开始轻松愉快地创建样式化的React组件了。构建通用的响应组件，可以以多种方式构建样式化的React组件。样式组件库提供的模式使我们能够构建结构良好的UI应用程序。从小的UI组件(如按钮、输入、排版和选项卡)构建一个更统一、更一致的应用程序。这种样式化方法的主要优点是能够编写纯CSS。正如在Glamor示例中看到的，CSS属性名必须更改为camel case，因为它们是JavaScript对象的属性。样式组件还会生成与现有元素类似的响应友好的原语。利用JavaScript模板文字，我们可以使用CSS的全部功能来样式化组件。如输入元素示例所示，我们可以定义外部JavaScript变量并将这些变量应用到我们的样式中。通过这些简单的组件，我们可以轻松地为应用程序构建一个样式指南。但在许多情况下，我们还需要更复杂的组件，这些组件可以根据外部因素进行更改。