CSS - 如何在React中优雅的写CSS - 学习/实践

布满荆棘的人生 2022-11-22 05:14 130阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于学习掌握如何在react中书写css样式, 实现页面布局.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档阅读 <a href="https://juejin.im/post/6844904021304541198" rel="nofollow">https://juejin.im/post/6844904021304541198</a>&nbsp; //&nbsp;如何在React中优雅的写CSS <a href="https://www.zhihu.com/question/30757566" rel="nofollow">https://www.zhihu.com/question/30757566</a>&nbsp; //&nbsp;如何在 React 中运用 CSS？ <a href="https://react.docschina.org/docs/faq-styling.html" rel="nofollow">https://react.docschina.org/docs/faq-styling.html</a>&nbsp; &nbsp;// react 官方文档中有简单提到关于在react中使用css 截图如下：// 且可以看到为什么react 采用class定义样式的原因之一 【从性能角度来说，CSS 的 class 通常比行内样式更好。】 <img alt="" height="1112" src="https://img-blog.csdnimg.cn/20210108112944512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="786"> &nbsp; &nbsp; &nbsp; &nbsp; 同时，公司技术规范: <img alt="" height="373" src="https://img-blog.csdnimg.cn/20201103154500225.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1029"> &nbsp; <a href="https://tech-strategy.ssod.skinfra.xyz/docs/v1/components.html#web-applications" rel="nofollow">https://tech-strategy.ssod.skinfra.xyz/docs/v1/components.html#web-applications</a> <a href="https://tech-strategy.ssod.skinfra.xyz/docs/v1/technology.html#treat" rel="nofollow">https://tech-strategy.ssod.skinfra.xyz/docs/v1/technology.html#treat</a> <a href="https://github.com/seek-oss/treat" rel="nofollow">https://github.com/seek-oss/treat</a>&nbsp; // treat 仓库 css-in-js 方案 <a href="https://github.com/css-modules/css-modules" rel="nofollow">https://github.com/css-modules/css-modules</a>&nbsp; //&nbsp;css Modules 方案 &nbsp; <a href="https://github.com/css-modules/webpack-demo" rel="nofollow">https://github.com/css-modules/webpack-demo</a>&nbsp; // demo <img alt="" height="681" src="https://img-blog.csdnimg.cn/20201103182515232.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; 项目电脑位置: C:\Users\williamning\Desktop\Ad Type Web Component\css modules\webpack-demo 命令执行:&nbsp; <pre><code>npm start &amp; open http://localhost:8080</code></pre> <img alt="" height="315" src="https://img-blog.csdnimg.cn/20201204111047220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> Note: 并没有自动打开浏览器, 所以这里手动打开了浏览器 这里查了问题, Windows下, 应该为: //会使用默认的浏览器打开, 可以指定浏览器, 如chrome / firefox / ie / edge <code>npm start &amp; start http://localhost:8080</code> &nbsp; 使用执行指定的浏览器打开: chrome Note:&nbsp;这里如果将http去掉, chrome只会打开一个空的tab页. 测试版本: 版本 87.0.4280.66（正式版本） （64 位） 所以, 建议, 在所有的浏览器中, 统一加上对应的协议: http/https, 具体那个根据自身情况而定. <img alt="" height="201" src="https://img-blog.csdnimg.cn/20201204112143610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1046"> &nbsp; firefox <img alt="" height="251" src="https://img-blog.csdnimg.cn/20201204111920295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1028"> &nbsp; ie / edge Note: 直接输入ie / edge 是不行的, 因为Windows在cmd中并不能识别出该程序. 必须要写精确的程序名[即对应程序的&nbsp;.exe后缀的文件名], 关于如何找到程序所在位置, 直接在程序中搜索ie, 右键属性-&gt;打开文件所在位置, 如果是打开的是快捷键位置, 继续右键属性-&gt;打开文件所在位置...最后找到真正的程序可执行文件位置. <img alt="" height="321" src="https://img-blog.csdnimg.cn/20201204112648741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1125"> <img alt="" height="509" src="https://img-blog.csdnimg.cn/20201204112947443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="823"> edge没有没找到, 所以就这样. &nbsp; 命令汇总: 正常打开：// .exe可省略 start chrome.exe http://www.baidu.com start firefox.exe http://www.baidu.com start iexplore.exe http://www.baidu.com &nbsp; 最大化、最小化打开： start /max iexplore.exe http://www.baidu.com start /min iexplore.exe http://www.baidu.com 更多信息参考:&nbsp;<a href="https://blog.csdn.net/william_n/article/details/103619331" rel="nofollow">https://blog.csdn.net/william_n/article/details/103619331</a> &nbsp; &nbsp; 浏览器中手动输入: // 如果只是为了个人测试, 验证知识点, 个人认为暂时没有必要花费过多的时间在这个上面. 但是如果是开发脚手架工具等, 还是要全部实现自动化.&nbsp; <a href="http://localhost:8080/" rel="nofollow">http://localhost:8080/</a>&nbsp; &nbsp; <img alt="" height="1200" src="https://img-blog.csdnimg.cn/20201103182708124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; 大概能看出基本用法. &nbsp; 公司要求样式书写: <img alt="" height="1200" src="https://img-blog.csdnimg.cn/20201103183449553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="939"> &nbsp; &nbsp; 其中: <a href="https://juejin.cn/post/6844904021304541198" rel="nofollow">https://juejin.cn/post/6844904021304541198</a>&nbsp;// 如何在React中优雅的写CSS - 截图如下 <img alt="" height="1200" src="https://img-blog.csdnimg.cn/20201204102637601.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="692"> &nbsp; &nbsp; less与treat的写法对比, 效果一致 <a href="https://seek-oss.github.io/treat/data-types" rel="nofollow">https://seek-oss.github.io/treat/data-types</a> <img alt="" height="858" src="https://img-blog.csdnimg.cn/20201125153941502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; 2.个人整理输出 TBD &nbsp; &nbsp; &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://juejin.im/post/6844904021304541198" rel="nofollow">https://juejin.im/post/6844904021304541198</a>&nbsp; //&nbsp;如何在React中优雅的写CSS <a href="https://www.zhihu.com/question/30757566" rel="nofollow">https://www.zhihu.com/question/30757566</a>&nbsp; //&nbsp;如何在 React 中运用 CSS？ <a href="https://tech-strategy.ssod.skinfra.xyz/docs/v1/components.html#web-applications" rel="nofollow">https://tech-strategy.ssod.skinfra.xyz/docs/v1/components.html#web-applications</a> <a href="https://tech-strategy.ssod.skinfra.xyz/docs/v1/technology.html#treat" rel="nofollow">https://tech-strategy.ssod.skinfra.xyz/docs/v1/technology.html#treat</a> <a href="https://github.com/seek-oss/treat" rel="nofollow">https://github.com/seek-oss/treat</a>&nbsp; // treat 仓库 css-in-js 方案 <a href="https://github.com/css-modules/css-modules" rel="nofollow">https://github.com/css-modules/css-modules</a>&nbsp; //&nbsp;css Modules 方案 <a href="https://react.docschina.org/docs/faq-styling.html" rel="nofollow">https://react.docschina.org/docs/faq-styling.html</a>&nbsp; &nbsp;// react 官方文档中有简单提到关于在react中使用css </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...