做loge的网站拉新app推广接单平台

编辑MUI样式

MUI 和 syuled-components 都有自己的主题机制 要他们配合使用需要看上一篇 styled-components作为 MUI的样式引擎实现 让 MUI采用styled-components 式自定义样式组件

完成后查看 styled-components 的props

import { Button, styled } from "@mui/material";const MyBtn = styled(Button)`${props => {console.log(props);return "";}}
`;<MyBtn variant="contained">Hello MUI
</MyBtn>

非常棒 MUI的主题样式填充到了styled-components的props中了

编辑样式

const MyBtn = styled(Button)`border: 2px solid #ccc;margin: 0.5rem;
`;

自定义主题

./theme/index.ts

import { createTheme } from "@mui/material";export const light = createTheme({palette: {primary: { light: "#3f3ff5", main: "#51f", dark: "#4108cf" },mode: "light",},
});export const dark = createTheme({palette: {primary: { light: "#888", main: "#222", dark: "#333" },mode: "dark",},
});

使用

const Title = styled("section")`color: ${props => props.theme.palette.primary.light};background: ${props => props.theme.palette.background.default};
`;

切换主题

import * as Theme from "./theme";function App() {const [mode, setMode] = useState<"light" | "dark">("dark");const toggleTheme = useCallback(() => setMode(prev => (prev === "dark" ? "light" : "dark")),[]);return (<ThemeProvider theme={Theme[mode]}><MyBtn onClick={toggleTheme} variant="contained">Hello MUI</MyBtn><Title>234</Title></ThemeProvider>)
}

styled-component使用MUI主题开发组件

• MUI的styled支持像下面这样使用

import { styled } from "@mui/material";const Title = styled("section")`color: ${props => props.theme.palette.primary.light};background: ${props => props.theme.palette.background.default};
`;

• 使用 styled-component的styled (真不戳)

const Title = styled.section`color: ${props => props.theme.palette.primary.light};background: ${props => props.theme.palette.background.default};${props => {console.log("styled-component:", props);return "";}}
`;

我们发现

MUI的主题与styled-component的主题同步了而我并没有加入 import { ThemeProvider } from "styled-components"; 只使用了MUI的import { ThemeProvider } from "@mui/material";
真象就是 使用 styled-compoent作为 MUI的样式引擎 MUI的ThemeProvider内部实现的styled-components的ThemeProvider 方便极了

styledd-components Theme typescript 支持

在使用中发现 styled-components 的props.theme没有自动提示
因为 默认的theme是一个空接口 需要我们自己拓展 添加自己的theme

• 在src目录下创建 d.ts
  让styled-components的theme继承mui的Theme

import "styled-components";
import { Theme } from "@mui/material";declare module "styled-components" {export interface DefaultTheme extends Theme {}
}

关于d.ts的位置 参考 tsconfig.json 中的include字段

参考