MUI配合styled

#MUI配合styled| 来源: 网络整理| 查看: 265

文章目录编辑MUI样式自定义主题styled-component使用MUI主题开发组件styledd-components Theme typescript 支持

编辑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 ""; }} `; Hello MUI

在这里插入图片描述非常棒 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("dark"); const toggleTheme = useCallback( () => setMode(prev => (prev === "dark" ? "light" : "dark")), [] ); return ( toggleTheme} variant="contained"> Hello MUI 234 ) } 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字段

在这里插入图片描述参考

【本文地址】

MUI配合styled

MUI配合styled

今日新闻

推荐新闻