前言
React组件CSS-in-JS是一种流行的前端开发技术，它将组件的JavaScript逻辑与样式定义结合在一起，以提高代码的可维护性和可重用性。通过CSS-in-JS，开发者可以在组件级别轻松管理样式，而不必担心全局污染或类名冲突。
这种方法使用JavaScript对象来描述样式，这些对象可以根据组件的状态或属性进行动态计算，从而实现高度灵活的样式处理。常见的React CSS-in-JS库包括Styled-components和Emotion。
CSS-in-JS还可以提供一些额外的好处，如自动前缀处理和代码拆分，以提高性能。但需要注意，它可能需要一些学习曲线，并且可能不适合所有项目。总之，React组件CSS-in-JS是一个强大的工具，可以帮助开发者更轻松地管理组件样式，从而提高前端开发的效率和可维护性。
- 在 React 中, React 认为结构和逻辑是密不可分的, 所以在 React 中结构代码也是通过 JS 来编写的
- 正是受到 React 这种思想的影响, 所以就有很多人开发了用 JS 来编写 CSS 的库
比较火热的库有：styled-components / emotion
- 利用 JS 来编写 CSS, 可以让 CSS 具备样式嵌套、函数定义、逻辑复用、动态修改状态等特性
- 也就是说, 从某种层面上, 提供了比过去 Less/Scss 更为强大的功能
- 所以 CSS-In-JS, 在 React 中也是一种比较推荐的方式
styled-components 的使用
- 安装 styled-components
npm install styled-components --save
- 导入 styled-components
import styled from 'styled-components';
- 利用 styled-components 创建组件并设置样式
styled.div` xxx:xxx `
案例
import React from 'react'; import styled from 'styled-components'; const StyleDiv = styled.div` p{ font-size: 50px; color: red; } a{ font-size: 25px; color: green; } `; class Home extends React.Component { render() { return ( <StyleDiv> <p>我是home段落</p> <a href={'https://www.cnblogs.com/yangbuyiya/'}>我是home超链接</a> </StyleDiv> ) } } export default Home;
注意点
默认情况下，在 webstorm 当中编写 styled-components 的代码是没有任何的代码提示的 如果想要有代码提示，那么必须给 webstorm 安装一个插件，插件名字为
webstorm-styled-components由于该插件需要翻墙，所以博主这里提供下载链接：https://www.aliyundrive.com/s/BBGgHFiH7fd
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
