如何在react项目使用styled-components以及styled-components的应用和介绍

焦糖玛奇朵__

已于 2022-07-22 19:55:41 修改

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： react.js 前端前端框架

于 2022-07-22 19:50:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39826423/article/details/125938863

概念：styled-components 是对于如何增强 React 组件中 CSS 表现这个问题的思考结果通过聚焦于单个用例,设法优化了开发者的体验和面向终端用户的输出.

1.我们在react项目中怎么使用呢，首先我们在pages里新建一个文件夹，里面需要有一个tsx文件和一个ts文件

2.然后在styled.ts文件里引入styled-components

3.在下面写，wrapper是组件名称，如果这个组件是div的话就是styled.div，如果是p标签或者是其他标签的话就是styled.p或者其他标签，我们写样式需要在模板字符串里写也就是 `` ，这里为了方便开发，我们需要下载一个vscode的插件，这个插件会有语法提示已经语法高亮

export const Wrapper = styled.div<IAppProps>`
    width: 100%;
    height: 100%;
    background-image: url('${(props) => props.bg}');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
`;

4.我们定义好组件以后，需要在tsx页面引入，就像antd引入一样，这里因为我只写了Wrapper组件，所以我只引入了一个，如果你写的组件多的话，就在后面继续引入，这里的传值是和我们熟悉的组件传值一样的

import React from 'react';
import { Wrapper } from './styled';
import ImgUrl from '../../assets/images/下载.jpg';

const Login: React.FC = () => {
    return (
        <Wrapper bg={ImgUrl}></Wrapper>
    );
};

export default Login;

5.使用styled-components之后我们的页面标签就和使用css或者less其他样式文件写的不一样了