React项目中使用 styled-components

最新推荐文章于 2024-08-27 08:08:48 发布

米酷i

最新推荐文章于 2024-08-27 08:08:48 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

原文链接：https://juejin.cn/post/6844903878580764686

本文介绍如何安装及使用styled-components库来创建样式化的React组件，并通过一个简单的Header组件示例展示了其基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm install styled-components --save

import styled from 'styled-components';
//styled.xxx表示创建xxx这个h5标签,
//后面紧接的字符串里面写的是CSS代码
export const HeaderWrapper = styled.div`
  z-index: 1;
  position: relative;
  height: 56px;
  border-bottom: 1px solid #f0f0f0;
`;

之后在APP中使用它

import React, {Component} from 'react';
import { HeaderWrapper } from './style.js';

class App extend Component{
    render() {
        return (
            <HeaderWrapper></HeaderWrapper>
        )
    }
}
export default App;

vscode 插件：vscode-styled-components