高仿网易云的笔记记录-day4

对网页进行设计在components中创建app-header和app-footer文件夹和index.tsx在他们之中写网页逻辑使用styled-components来对页面写样式现在终端安装npm install styled-component -D在对应组件的文件夹中创建style.ts如在app-header下创建在整个项目下面创建声明文件style.d.ts// src/styled.d.ts import styled-components declare module styled-components { export interface DefaultTheme { color: { primary: string secondary: string } size: Recordstring, unknown // ✅ 修复使用 Record mixin: Recordstring, never } }因为是ts文件所以需要针对该依赖安装类型声明npm install types/styled-components -Dexport const HeaderWrapper styled.div这行代码做了三件重要的事情1. ​创建样式化组件​styled.div表示你要创建一个div元素的样式化版本它返回一个React 组件这个组件会自动应用你定义的 CSS 样式2. ​定义组件名称​HeaderWrapper是你给这个样式化组件起的名字这个名字应该描述性地表达这个组件的用途3. ​导出组件​export关键字表示这个组件可以被其他文件导入使用将heaferWrapper导出到index.tsx里面就可以使用了在style.ts中继续编写组件注意export const HeaderWrapper styled.div由两个点括起来在哪里编辑总体主题在assets中创建theme文件夹和index在其中编辑theme主题// theme.js const theme { color: { primary: #C20C0C, secondary: }, size: {}, mixin: { wrapv1: width: 1100px; margin: 0 auto; } } export default theme混入mixin格式为mixin: { // 页面内容区域居中 wrapv1: width: 1100px; margin: 0 auto; , // 文字超出显示省略号 textEllipsis: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; , // 水平居中 flexCenter: display: flex; justify-content: center; align-items: center; 使用改固定样式来编写高复用率的样式款式 mixin: { wrapv1: width: 1100px; margin: 0 auto; , flexCenter: display: flex; justify-content: center; align-items: center; }在src下创建文件夹src/styled.d.ts文件// src/styled.d.ts import styled-components; declare module styled-components { export interface DefaultTheme { color: { primary: string; secondary: string; }; size: Recordstring, unknown; // 或者更具体的类型 mixin: { wrapv1: string; }; } }然后去到整个文件的目录的index.ts导入ThemeProvider编辑好对应的属性用ThemeProvider包裹好ThemeProvider theme{theme} HashRouter App / /HashRouter /ThemeProvider使用ThemeProvider包裹好后theme中设置的混入就可以让全部人使用了但是我们不用定义混用而是使用直接定义类然后给对应组件添加类名后续导入先行项目材料精灵图、css对顶部header继续设计对header部分数据进行填写在data创建header-titles.json将数据统一到json数据中管理[ { title: 发现音乐, type: path, link: /discover }, { title: 我的音乐, type: path, link: /mine }, { title: 关注, type: path, link: /focus }, { title: 商城, type: link, link: https://music.163.com/store/product }, { title: 音乐人, type: link, link: https://music.163.com/st/musician }, { title: 下载客户端, type: path, link: /download } ]然后在index中调用import headerTitles from /assets/data/header_title.jsondiv classNametitle-list {headerTitles.map((item) { return ( div classNameitem key{item.title} {showItem(item)} /div ) })} /div编辑showItem中的if等逻辑function showItem(item: any) { if (item.type path) { return Link to{item.path}{item.title}/Link } else { return ( a href{item.link} target_blank relnoopener noreferrer {item.title} /a ) } }