admin管理员组

文章数量:1023187

In this simple example I'm importing Material UI from esm.sh.

I create a theme which seems to be ok when I console.log it.

However the Typography component is not picking up the theme from the ThemeProvider.

Does anyone know why?

CodeSandBox

      import * as React from ";;
      import { createRoot } from ";;

      import {
        createTheme,
        ThemeProvider,
      } from "/@mui/material/styles";
      import Typography from "/@mui/material/Typography";
      import CssBaseline from "/@mui/material/CssBaseline";

      const myTheme = createTheme({
        typography: {
          h1: {
            fontSize: "1rem",
            color: "green",
          },
        },
      });

      const App = () => {
        return (
          <div>
            <ThemeProvider theme={myTheme}>
              {console.log(myTheme)}
              <CssBaseline />
              <Typography variant="h1">heading 1</Typography>
            </ThemeProvider>
          </div>
        );
      };

      const root = createRoot(document.getElementById("root"));

      root.render(<App />);

In this simple example I'm importing Material UI from esm.sh.

I create a theme which seems to be ok when I console.log it.

However the Typography component is not picking up the theme from the ThemeProvider.

Does anyone know why?

CodeSandBox

      import * as React from ";;
      import { createRoot } from ";;

      import {
        createTheme,
        ThemeProvider,
      } from "/@mui/material/styles";
      import Typography from "/@mui/material/Typography";
      import CssBaseline from "/@mui/material/CssBaseline";

      const myTheme = createTheme({
        typography: {
          h1: {
            fontSize: "1rem",
            color: "green",
          },
        },
      });

      const App = () => {
        return (
          <div>
            <ThemeProvider theme={myTheme}>
              {console.log(myTheme)}
              <CssBaseline />
              <Typography variant="h1">heading 1</Typography>
            </ThemeProvider>
          </div>
        );
      };

      const root = createRoot(document.getElementById("root"));

      root.render(<App />);

本文标签： material uiTypography component is not picking up the theme from the ThemeProviderStack Overflow

版权声明：本文标题：material ui - Typography component is not picking up the theme from the ThemeProvider - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745597981a2158285.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。