【React】styled-components 基本使用

安装

npm install styled-components

组件使用

style.ts

import styled from 'styled-components'export const HeaderWrapper = styled.div`height: 75px;background-color: #242424;font-size: 14px;color: #fff;.content {display: flex;justify-content: space-between;}.divider {height: 5px;background-color: #c20c0c;}
`export const HeaderLeft = styled.div`display: flex;.logo {display: block;width: 176px;height: 70px;background-position: 0 0;text-indent: -9999px;}.title-list {display: flex;line-height: 70px;.item {position: relative;a {display: block;padding: 0 20px;color: #ccc;}:last-of-type a {position: relative;::after {position: absolute;content: '';width: 28px;height: 19px;background-image: url(${require('@/assets/img/sprite_01.png')});background-position: -190px 0;top: 20px;right: -15px;}}&:hover a,.active {color: #fff;background: #000;text-decoration: none;}.active .icon {position: absolute;display: inline-block;width: 12px;height: 7px;bottom: -1px;left: 50%;transform: translate(-50%, 0);background-position: -226px 0;}}}
`
export const HeaderRight = styled.div`display: flex;align-items: center;color: #787878;font-size: 12px;.search {width: 158px;height: 32px;border-radius: 16px;input {&::placeholder {font-size: 12px;}}}.center {width: 90px;height: 32px;line-height: 32px;text-align: center;border: 1px solid #666;border-radius: 16px;margin: 0 16px;cursor: pointer;color: #fff;:hover {color: #fff;border-color: #fff;}}
`

index.tsx

import {HeaderLeft,HeaderRight,HeaderWrapper
} from "@/components/app-header/style";
import headerTitles from "@/assets/data/header_titles.json";
// ...interface IProps {children?: React.ReactNode;
}const AppHeader: FC<IProps> = () => {// ...return (<HeaderWrapper><div className={"content wrap-v1"}><HeaderLeft><a className="logo sprite_01" href="/">网易云音乐</a><div className="title-list">{headerTitles.map((item) => {return (<div className="item active" key={item.title}>{showItem(item)}</div>);})}</div></HeaderLeft><HeaderRight><span className="input"><InputclassName="search"placeholder="音乐/视频/电台/用户"prefix={<SearchOutlined />}/></span><span className="center">创作者中心</span><span className="login">登录</span></HeaderRight></div><div className="divider"></div></HeaderWrapper>);
};export default memo(AppHeader);

主题使用

theme.ts

const theme = {color: {primary: '#c20c0c',secondary: ''},size: {},mixin: {wrapv1: `width: 1100px;margin: 0 auto;`,textNowrap: `white-space: nowrap;text-overflow: ellipsis;overflow: hidden;`}
}export default theme

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "@/App";
import "normalize.css";
// 导入全局样式
import "./assets/css/index.scss";
import { HashRouter } from "react-router-dom";
import store from "@/store";
import { Provider } from "react-redux";
import { ThemeProvider } from "styled-components";
import theme from "@/assets/theme";const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement
);
root.render(<React.StrictMode><Provider store={store}><ThemeProvider theme={theme}><HashRouter><App /></HashRouter></ThemeProvider></Provider></React.StrictMode>
);

在 styled-components 组件中直接使用 :

background-color: ${(props) => props.theme.color.primary};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/3998.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Pr 沉浸式视频 - 自动 VR 属性

自动 VR 属性 Auto VR Properties是所有 VR 视频效果和视频过渡效果的通用选项。 默认勾选。此选项使效果自动适应 VR 素材的属性&#xff0c;确保在 360 全景环境中无缝显示。 当处理 VR/360 素材时&#xff0c;保持勾选以避免接缝。 当处理非 VR 素材或需要手动设置 VR 属性时…

[项目] C++基于多设计模式下的同步异步日志系统

[项目] C基于多设计模式下的同步&异步日志系统 文章目录 [项目] C基于多设计模式下的同步&异步日志系统日志系统1、项目介绍2、开发环境3、核心技术4、日志系统介绍4.1 日志系统的价值4.2 日志系统技术实现4.2.1 同步写日志4.2.2 异步写日志 5、相关技术知识5.1 不定参…

ubuntu下使用pocketsphinx进行语音识别

文章目录 前言一、pocketsphinx的介绍二、ubuntu下编译三、使用示例1.模型选择2.代码示例3.自定义字典 四、交叉编译总结 前言 由于工作需要语音识别的功能&#xff0c;环境是在linux arm版上&#xff0c;所以想先在ubuntu上跑起来看一看&#xff0c;就找了一下语音识别的开源…

C语言原码、反码和补码的详解

C语言原码、反码和补码的详解 放在最前面的1、前言正数的原码、反码和补码负数的原码、反码和补码 2、整数的原码&#xff08;2.1&#xff09;原码的定义&#xff08;2.2&#xff09;计算原码 3、整数的反码&#xff08;3.1&#xff09;反码的定义&#xff08;3.2&#xff09;计…

知识课堂——高匿ip在不同业务中的重要作用

大家好&#xff01;今天我们来看看高匿ip在不同业务中都能起到什么样的重要作用。第一个会用到的地方就是网络数据采集&#xff0c;也被称为网络爬虫&#xff0c;在是许多企业和机构获取大量数据的重要手段。例如市场调研公司帮助企业制定市场策略就需要收集各个行业的产品价格…

【青牛科技】GC8548替代LV8548/ONSEMI在摇头机、舞台灯、打印机和白色家电等产品上的应用分析

引言 在现代电子设备中&#xff0c;控制芯片的选择对产品的性能和可靠性至关重要。摇头机、舞台灯、打印机和白色家电等领域对芯片的要求日益增加&#xff0c;传统上多采用LV8548/ONSEMI等国际品牌的芯片。然而&#xff0c;随着国内半导体技术的不断进步&#xff0c;芯麦GC854…

【C/C++】字符/字符串函数(0)——由ctype.h提供

零.导言 众所周知&#xff0c;C语言的字符有许多不同的类型&#xff0c;如&#xff1a;数字&#xff0c;字母&#xff0c;标点符号等等等等。 今天&#xff0c;我就给大家讲解一下用于实现字符分类的函数——字符分类函数。 一.什么是字符分类函数&#xff1f; 即实现字符分类的…

专业网页设计服务重要是什么

当在搜索引擎中键入“网页设计”&#xff0c;您将获得超过2000万个相关结果。在如此众多的网站制作公司中&#xff0c;应该如何做出明智的选择呢&#xff1f;首先&#xff0c;让我们深入探讨一下网页设计的重要性。网站设计需要综合各种不同领域的专业知识&#xff0c;它是一个…

【CanMV K230】windows部署AICube,训练模型

【CanMV K230】windows部署AICube&#xff0c;训练模型 dotnet sdk的下载链接配置环境 AI_Cube安装训练AI_Cube安装模型训练 在开发板上运行模型 B站视频链接&#xff1a;《K230 实战》windows系统下使用AI_Cube,训练模型 AI Cube 是由嘉楠科技开发的一款通用视觉 AI 计算平台&…

力扣每日一题 超级饮料的最大强化能量 动态规划(dp)

来自未来的体育科学家给你两个整数数组 energyDrinkA 和 energyDrinkB&#xff0c;数组长度都等于 n。这两个数组分别代表 A、B 两种不同能量饮料每小时所能提供的强化能量。 你需要每小时饮用一种能量饮料来 最大化 你的总强化能量。然而&#xff0c;如果从一种能量饮料切换到…

RK3568平台开发系列讲解(字符设备驱动篇)注册字符设备

🚀返回专栏总目录 文章目录 一、字符设备初始化二、字符设备的注册和注销沉淀、分享、成长,让自己和他人都能有所收获!😄 📢注册字符设备可以分为两个步骤: 字符设备初始化字符设备的添加一、字符设备初始化 字符设备初始化所用到的函数为 cdev_init(…),在对该函数讲…

在 Scnet 上微调 Stable Diffusion 3 模型

1 AI 算力反馈 1.1 运行的商品名称 我运行的商品为 Stable Diffusion 3 文本到图像高质量生成AI绘画推理服务&#xff0c;运行的环境为 异构加速卡AI 64G。具体创建流程如下&#xff1a; 1.1.1 购买模型服务 首先购买一下模型服务&#xff0c;这样我们就不需要再从 Hugging…

ffmpeg命令——从wireshark包中的rtp包中分离h264

ffmpeg命令——从wireshark包中的rtp包中分离h264 过滤 RTP打开wireshark的RTP 播放器选中流并导出荷载使用 ffmpeg 命令行分离出 h264 过滤 RTP 打开wireshark的RTP 播放器 选中流并导出荷载 使用 ffmpeg 命令行分离出 h264 ffmpeg -i test.raw -vcodec copy -an -f h264 tes…

机器学习(二)——线性回归模型、多分类学习(附核心思想和Python实现源码)

目录 关于1. 基本形式2. 线性回归2.1 单变量线性回归2.2 多元线性回归2.2 对数线性回归 3. 对数几率回归4. 线性判别分析5. 多分类学习5.1 拆分策略 6. 类别不平衡问题X 案例代码X.1 源码X.2 数据集&#xff08;糖尿病数据集&#xff09;X.3 模型效果 关于 本文是基于西瓜书&a…

【机器学习】22. 聚类cluster - K-means

聚类cluster - K-means 1. 定义2. 测量数据点之间的相似性3. Centroid and medoid4. Cluster之间距离的测量方式5. 聚类算法的类别6. K-mean7. 如何解决中心初始化带来的影响8. K-means问题&#xff1a;处理空集群9. 离群值的问题10. Bisecting K-means&#xff08;二分K-means…

【python_pandas_将列表按照某几列进行分组,再求和,按照原列表的字段顺序返回】

说明&#xff1a; 1、按照[“行描述”,”‘公司代码’, ‘科目代码’, ‘预算项目代码’] 进行分组。 2、对“贷方”列进行求和。 3、最后按照之前的表头顺序进行排序&#xff0c;返回结果列表。 #-*- coding:utf-8-*import pandas as pd def consolidate_salary_provisions(l…

【Vue框架】基础语法练习(1)

其实更多知识点已经在Vue.js官网十分清楚了&#xff0c;大家也可以去官网进行更细节的学习 https://cn.vuejs.org/ 说明&#xff1a;目前最新是Vue3版本的&#xff0c;但是Vue2已经深得人心&#xff0c;所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API&#xf…

公司如何防止员工泄密?十佳措施拒绝泄密,公司防泄密刻不容缓! (2024最强科普)

如何有效防止员工泄露机密&#xff1f; 作为公司的经营者&#xff0c;您是否意识到了商业秘密的重要性&#xff1f;您是否已经知道应该采取什么样的措施才能保护好自己的商业秘密&#xff1f; 员工的泄密行为不仅可能造成重大的经济损失&#xff0c;还会对企业的声誉造成严重…

[大模型]视频生成-Sora简析

参考资料&#xff1a; Sora技术报告https://openai.com/index/video-generation-models-as-world-simulators/4分钟详细揭密&#xff01;Sora视频生成模型原理https://www.bilibili.com/video/BV1AW421K7Ut 一、概述 相较于Gen-2、Stable Diffusion、Pika等生成模型的前辈&am…

linux中级(防火墙firewalld)

一。firewalld与iptables区别1.firewalld可以动态修改单条规则&#xff0c;不需要像iptables那样&#xff0c;修改规则后必须全部刷新才可生效。firewalld默认动作是拒绝&#xff0c;则每个服务都需要去设置才能放行&#xff0c;而iptables里默认是每个服务是允许&#xff0c;需…