MUI配合styled-components主题支持

最新推荐文章于 2024-07-08 10:41:57 发布

Jedi Hongbin

最新推荐文章于 2024-07-08 10:41:57 发布

阅读量970

点赞数

分类专栏： react styled-components 文章标签：前端 react.js MUI

本文链接：https://blog.csdn.net/printf_hello/article/details/121224401

版权

react 同时被 2 个专栏收录

82 篇文章

订阅专栏

styled-components

5 篇文章

订阅专栏

本文介绍了如何在MUI中结合styled-components进行样式自定义，包括编辑MUI样式、创建和使用自定义主题，以及在typescript环境中为styled-components提供主题类型支持。通过示例代码展示了如何在组件中访问和使用主题属性，以及切换主题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

编辑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 {}
}