Material-UI + Next js – TypeError: theme.spacing is not a function.

我改了之后就遇到了这个问题 _app.js 来动态地制作材质UI主题。我一直在按照material-ui团队的示例实现。https:/github.commui-orgmaterial-uitreemasterexamplesnextjs。.

简而言之：

我正在从REST获取主题颜色–使用 createMuiTheme
传递工艺主题在 _app.js 榰

我有一个控制器，可以提取主题相关的信息。

\\ Brand.ts
export async function getBrand(): Promise<Brand> {
  const api = `${api_url}/brand`;
  try {
    const response = await fetch(api);
    const { data } = await response.json();
    console.log(data);
    if (data.length > 0) {
      const brand: Brand = {
        primary_main: data[0].primary_main,
        primary_contrastText: data[0].primary_contrastText,
        secondary_main: data[0].secondary_main,
        secondary_contrastText: data[0].secondary_contrastText,
        error_main: data[0].error_main,
        background_default: data[0].background_default
      }
      return brand;
    } else {
      return getDefaulBrand();
    }
  } catch (error) {
    console.log('error');
    return getDefaulBrand();
  }
}

function createMuiThemeFromBrand(brand: Brand) {
  return createMuiTheme({
    palette: {
      primary: {
        main: brand.primary_main,
        contrastText: brand.primary_contrastText,
      },
      secondary: {
        main: brand.secondary_main,
        contrastText: brand.secondary_contrastText,
      },
      error: {
        main: brand.error_main,
      },
      background: {
        default: brand.background_default,
      },
    },
  });
}

export default async function getBrandTheme() {
  const brand = await getBrand();
  return createMuiThemeFromBrand(brand);
}

我的theme.js文件是这样的。

// theme.js
import getBrand from "./controller/Brand";
export default getBrand;

修改了 _app.js 文件现在看起来是这样的。

import React from "react";
import PropTypes from "prop-types";
import Head from "next/head";
import { ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import getBrand from "../src/theme"; // <- get brand
import App from "next/app";

MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  // get theme from server 
  // -----------------------------
  const theme = await getBrand();
  // -----------------------------

  return { ...appProps, theme };
};

export default function MyApp(props) {
  const { Component, pageProps, theme } = props;

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>My page</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

现在的问题是，大部分工作都很好（背景颜色等）。但是，我似乎不能使用-任何功能，如（下面列出）在客户端的任何页面。

主题.间距
主题.断点

示例页。

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(10),
  },
}));

export default function Index() {
  const classes = useStyles();
  return (
    <div className={classes.root}> ....
  )
}

在渲染时，我得到的是：

TypeError: theme.spacing is not a function for 
from: 
 marginRight: theme.spacing(10),

我不知道我错过了什么。任何帮助将是感激的。

解决方案：

我通过调用 createMuiThemeFromBrand 范围内 MyApp(props)

本文来自投稿，不代表实战宝典立场，如若转载，请注明出处：https://www.shizhanbaodian.com/22976.html

Material-UI + Next js – TypeError: theme.spacing is not a function.

解决方案：

相关推荐

发表评论