初试 styled-components 感想

最新推荐文章于 2024-08-01 15:31:55 发布

M周

最新推荐文章于 2024-08-01 15:31:55 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏：随笔文章标签： styled-componentes

本文链接：https://blog.youkuaiyun.com/qq_36538734/article/details/97249647

随笔专栏收录该内容

1 篇文章

订阅专栏

本文分享了在React项目中引入Styled-Components的实际操作过程，包括安装、基本使用及组件样式的编写。通过将样式与组件相结合，实现更直观、语义化的代码编写体验。

因为今天想搭建一个react 框架大致样式是一个后台管理系统的模板
在这里插入图片描述
随后一贯喜欢尝鲜的我打算使用一些新东西，然后就从css下手一直以来我觉得react的样式写起来不像vue那样方便，总感觉不顺手随后搜到了 styled-components
首先安装一下
npm install styled-components --save
接下来正式写

import React from 'react';
// import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';
import Routes from './routes/index'
import Aside from './components/aside'

function App() {
    const Header = styled.div`
    background:blue;
    height:70px;
   `
    const Footer = styled.div`
    background:yellow;
    height:30px;
   `
    const Main = styled.div`
    height: calc(100% - 100px)!important;
    display:flex;
   `
    const Wrap=styled.div`
     height:100%;
   `
    const Content =styled.div`
    flex:1
    `


    return (
        <Wrap>
            <Header/>
            <Main>
                <Aside/>
                <Content>
                    <Routes/>
                </Content>
            </Main>
            <Footer/>
        </Wrap>

    );
}

export default App;

贴出我本页代码
大致就是创建一个组件用 styled.div styled.什么就创建什么dom然后写样式感觉优势是代码曾都语义化了，但是在页面的dom上没法体现也不好找对应的点。