styled-components 基本用法
    安装
    npm install -save styled-components
    或
    yarn add styled-components

    注：如使用tsx语法请同时安装相应的@types声明文件
    npm install —save-dev @types/styled-components
    或在react-app-env.d.ts 添加
    declare module ‘styled-components’
    两种方法都可以解决报错，但建议使用第一种方法，
    会下载所有的声明文件，在vscode中就会有相应的代码提示

    插件安装
    vscode 语法提示插件

    基础用法
    import React from ‘react’
    import styled from ‘styled-components’
    //styled.需要设置样式的DOM元素
    const Wrapper = styled.div<br /> width : 400px;<br /> height : 300px;<br /> //支持样式嵌套<br /> .content{ <br /> background: skyblue;<br /> color: #FFF;<br /> }<br />
    //返回一个含有样式的对应DOM元素的组件
    export default ()=>{
    return



    }

    传入变量
    import React from ‘react’
    import styled from ‘styled-components’
    //styled.需要设置样式的DOM元素
    const Wrapper = styled.div<br /> width : ${props=>props.width};<br /> height : ${props=>props.height};<br />
    //返回一个含有样式的对应DOM元素的组件
    export default ({width,height})=>{
    return



    }

    注意点
    1.样式组件的声明不要放在组件的内部 如下是错误的写法
    export default ()=>{
    const Wrapper = styled``
    return
    }

    2.如果使用tsx时，向样式组件传递属性时，需要设定对应接口
    interface WrapperProps{
    width : any;//这里写的是任意类型请参考实际情况书写正确类型
    }
    const Wrapper = styled.div{
    width : ${props=>props.width}
    }
    export default ({width})=>{
    return
    }

    更详细的用法请参考官方文档

    个人感受
    观点仅代表个人
    这个组件更好的贴合了react all in js的一个设计理念，除开HTML，js以后，将css也纳入到js中
    但是相对应的，在阅读HTML结构的时候需要可能翻阅上下文去了解正确的结构，牺牲了一部分的HTML可读性
    如有不正确观点很欢迎指正，本人也在学习ing，旨在记录和分享过程
    ————————————————
    版权声明：本文为CSDN博主「星河幻舞」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/weixin_45578480/article/details/109554255