css-in-js

1.概述

        CSS - in - JS 是一种将 CSS 样式写在 JavaScript 中的技术。它允许开发者使用 JavaScript 来定义和管理组件的样式，而不是传统的将 CSS 样式写在独立的.css 文件中或者在 HTML 文件的<style>标签内。

2.背景

        随着前端应用的复杂度不断增加，尤其是在组件化开发的场景下。传统的 CSS 方式在处理组件的样式隔离、动态样式以及样式的依赖管理等方面出现了一些问题。CSS - in - JS 的出现主要是为了解决这些问题，使得样式能够更好地与组件的逻辑结合在一起，方便进行维护和更新。

 3.优势

        1. 样式隔离：在组件化开发中，每个组件的样式可以独立地定义在其对应的 JavaScript 文件中。这样可以避免样式的全局污染，防止一个组件的样式意外地影响到其他组件的样式。例如，在一个大型的 React 应用中，有多个按钮组件，如果使用传统的 CSS，可能会出现样式冲突，而 CSS - in - JS 可以确保每个按钮组件的样式只作用于自身。

        2.动态样式：可以根据组件的状态或者属性来动态地生成样式。通过 JavaScript 的逻辑判断，在代码中动态地设置样式，这种方式比传统的通过添加或删除 CSS 类名来实现动态样式更加灵活。

        3.样式依赖管理：由于样式和组件的逻辑代码在同一个文件中，所以可以很清楚地看到样式和组件其他部分（如状态、属性、事件处理等）之间的依赖关系。这有助于在开发和维护过程中更好地理解代码结构。

4.css-in-js实现方式

      实现css-in-js的方式大致有三种 1.内联样式  2.styled-components 3.emotion

    1.内联样式

        这是最基本的 CSS - in - JS 形式。在 JavaScript 中直接通过设置元素的style属性来定义样式。下面是我以react为例：

       

import React from 'react'
import styled from 'styled-components';
export default function B() {
   
    

    let style={
         color: 'blue',
        fontSize: '16px'
    }
    return (
        <div>
            <button style={style}>哈哈哈</button>

        </div>
    )
}

2.styled-components

        Styled - Components 是一个用于在 React 应用（也可用于其他基于 JavaScript 的前端框架）中编写 CSS 样式的 JavaScript 库。它允许你使用 JavaScript 语法来定义样式，并且这些样式会以一种高效且易于管理的方式应用到组件上

安装:npm install styled-components

import React from 'react'
import styled from 'styled-components';
export default function B() {
    const Button = styled.button`
        background: ${props => (props.primary ? 'green' : 'white')};
        color: ${props => (props.primary ? 'white' : 'palevioletred')};
        font-size: 1em;
        margin: 1em;
        padding: 0.25em 1em;
        border: 2px solid palevioletred;
        border-radius: 3px;
    `;
    
    
    return (
        <div>


            <Button>哈哈哈哈</Button>

            <Button primary>啦啦啦啦</Button>
        </div>
    )
}

3.emotion

        Emotion 是一个流行的 CSS - in - JS 库，它提供了一种在 JavaScript 中编写 CSS 样式的高效方法，主要用于 React 等 JavaScript 框架中，但也可以在其他环境中使用。它的目标是让样式的编写更加灵活、高效且易于维护。

      Emotion有三种方式  1.@emotion/css  2.@emotion/react 3.@emotion/styled

安装：

        使用 npm 安装：npm install @emotion/react @emotion/styled @emotion/css

        使用 yarn 安装：yarn add @emotion/react @emotion/styled。

         1.@emotion/css

                

import React from 'react';
import { css } from '@emotion/css';

export default function B() {
    const color = 'red';

    return (
        <div>
            <div
                className={css`
                    background-color: hotpink;
                    &:hover {
                        color: ${color};
                    }
                `}
            >
                This has a hotpink background.
            </div>
        </div>
    );
}

            2.@emotion/react

import React from 'react'
// import styled from 'styled-components';
import { css } from '@emotion/react';

export default function B() {

   let color='green'

    return (
        <div>
            <button css={css`
                &:hover{
                    color:${color};
                }`
            }>sdfsdfsdfs</button>

        </div>
    )
}

               3.@emotion/styled                 

import React from 'react'
// import styled from 'styled-components';
import styled from '@emotion/styled';

export default function B() {

   let Button=styled.button`
     color:red;
   `

    return (
        <div>
            <Button>dddddd</Button>
        </div>
    )
}