当前位置: 首页 > Web前端 > CSS

如何愉快的写React样式

时间:2023-03-30 18:10:06 CSS

在React中写CSS一直是大家觉得不爽的地方。有更好的CSS解决方案吗?对于这个问题,社区一直在探索,从未停止过。本文介绍三种与React相关的CSS解决方案,希望能帮助大家在React的道路上越走越顺。CSS作为对象在React中,一切都是JS。包括看起来像HTML的JSX,它最终也会转化为JS。CSS也不例外,它必须表示为一个JS对象才能在组件中使用。作为最原始的解决方案,由Facebook官方提出,掀起了CSSinJS的热潮。最原始的用法如下:constdivStyle={color:'blue',fontSize:20,WebkitTransition:'all',msTransition:'all',};constHelloWorldComponent=()=>(HelloWorld!

);从这里可以看出,开发者首先使用JS对象编写CSS,然后通过style属性给组件元素赋值。在React内部,这个CSS对象会被转换成样式字符串,最终渲染时成为元素的内联样式。该方法有以下批评:style属性名的命名方式与传统CSS不同,无法自动提示style属性名且style值略有不同,如上例中的字体大小为20px写成20不能充分利用自动补充浏览器前缀功能,需要手动添加前缀,不能分离成一个独立的样式文件。基本样式无法有效复用。仔细看上面的代码,可以发现样式属性名的命名并不像驼峰命名那么简单。它也有一些不规则的命名法。比如WebkitTransition中的W是大写的,msTransition中的m是小写的。为了改善这些缺点,社区出现了一个轻量级的工具polished.js。CSSasFunctionpolished.js是JS中CSS的轻量级工具集。最早的v1.0.1版本发布于2017.03.30,至今将近一年。它总共封装了以下五类实用函数:混合函数(Mixins)、颜色函数(Color)、快捷函数(Shorthands)、帮助函数(Helpers)和类型函数(Types)。使用这些函数可以让我们不用直接写样式属性名,也可以在一定程度上实现样式复用。我们看一个具体的例子:import{wordWrap}from'polished';conststyle={...wordWrap('break-word')}//等价于conststyle={overflowWrap:'break-word',wordWrap:'break-word',wordBreak:'break-all',}或者更简单的例子:import{size}from'polished';conststyle={...size('300px','250px')}//是等价的toconststyle={height:'300px',width:'250px'}可见这个工具功能确实可以提高一些编码效率。但是记住这些工具功能也增加了学习成本,给人一种得不偿失的感觉。因此,这个方案并没有流行起来,我们还需要一个更好的CSS编码方案。虽然CSSasComponentpolished.js还没有流行起来,但是他们的开发团队想出了另一个更精彩的解决方案,那就是StyledComponents。StyledComponents巧妙地利用ES6标签模板来组合CSS和组件,模糊了组件和样式之间的界限。这意味着当我们编写样式时,我们实际上是在定义一个普通的React组件。反过来,开发者也可以像编写组件一样,非常自然地编写样式。如果你对标签模板了解不多,可以参考ECMAScript6入门了解详细解释。话不多说,来看看这个巧妙的写法:importReactfrom'react';import{render}from'react-dom';importstyledfrom'styled-components';constTitle=styled.h1`font-尺寸:1.5em;文本对齐:居中;颜色:palevioletred;`;constWrapper=styled.section`padding:4em;background:papayawhip;`;render(你好,这是我的第一个样式化组件!,document.getElementById('root'));上面我们使用styled.h1和styled.section创建了Title和Wrapper两个组件,它们会生成包含相应样式和
标签的

。由于Title和Wrapper是组件,我们可以像使用任何其他React组件一样使用它们。最终效果如下:使用带样式的组件编写样式与普通CSS完全一样。不用担心自动完成、浏览器前缀自动完成和语法突出显示。这些都有很好的工具支持,适用于所有主要编辑器。比如语法高亮后是这样的:当然,styled-component还支持很多其他的高级功能,比如设置样式主题、组件复用、样式扩展、媒体模板等,更详细的使用方法可以参考官方文档。此外,它还建立了自己的生态,提供了丰富的基础样式组件、网格系统、辅助插件等。可以说,styled-components让React组件开发变得更简单、更愉快!最后,HappyCoding~