如何与使用材料UI的组件lib正确使用自定义主题

发布于 2025-01-17 16:48:18 字数 655 浏览 3 评论 0原文

如何与使用材料UI的组件LIB正确使用自定义主题(我不想与它们包装所有组件)。

从'@yiter-ui/core/样式'导入{createMuitHeme};

const theme = createMuiTheme({
    palette: {
      primary: {
        main: '#1976d2'
      },
      success: {
        main: '#4caf50'
      }
    },
    typography: {
      fontSize: 16,
      h3: {
        fontWeight: 700,
        fontSize: '2.2rem'
      },
      h4: {
        fontWeight: 700,
        fontSize: '1.75rem'
      },
      h5: {
        fontWeight: 500
      },
      h6: {
        fontWeight: 500
      }
    }
  })

  export default theme;

我只有一个索引文件,其中像往常一样导出所有组件。如何将所有组件用主题包裹起来,而无需在任何地方进行操作?还是有更好的方法来自定义样式?

How to use custom theme correctly with component lib that uses Material UI (I don't want to wrap with them all components).

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
    palette: {
      primary: {
        main: '#1976d2'
      },
      success: {
        main: '#4caf50'
      }
    },
    typography: {
      fontSize: 16,
      h3: {
        fontWeight: 700,
        fontSize: '2.2rem'
      },
      h4: {
        fontWeight: 700,
        fontSize: '1.75rem'
      },
      h5: {
        fontWeight: 500
      },
      h6: {
        fontWeight: 500
      }
    }
  })

  export default theme;

I have only one index file where export all my components as usual lib does. How can I wrap all my components with the theme without doing it everywhere? Or is there better way to customize styles?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

花辞树 2025-01-24 16:48:18

您可以将 App.tsx 文件(或 _app.tsx,如果您使用 Next.js)包装在 ThemeProvider 中并提供您的主题:
https://mui.com/customization/theming/

You can wrap your App.tsx file (or _app.tsx if you use Next.js) in ThemeProvider and provide your theme:
https://mui.com/customization/theming/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文