安装
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};