React-组件-CSS-In-JS

前言

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

输入图片说明

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

输入图片说明