javascript - React-admin:使用文档中显示的自定义登录页面时出错

Question

尝试使用自定义 login 时遇到此错误页面来自 react-admin官方文档。

index.js:1 Warning: Failed prop type: The prop `theme` is marked as required in
`ThemeProvider`, but its value is `undefined`.

在 MyLoginPage.js ，我有这个代码

import * as React from 'react';
import { useState } from 'react';
import { useLogin, useNotify, Notification } from 'react-admin';
import { ThemeProvider } from '@material-ui/styles';

const MyLoginPage = ({ theme }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const login = useLogin();
  const notify = useNotify();
  const submit = (e) => {
      e.preventDefault();
      login({ email, password })
        .catch(() => notify('Invalid email or password'));
  };

  return (
     <ThemeProvider theme={theme}>
       <form onSubmit={submit}>
         <input 
           name="email" 
           type="email" 
           value={email} 
           onChange={e => setEmail(e.target.value)} 
         /> 
         <input 
           name="password" 
           type="password" 
           value={password} 
           onChange={e => setPassword(e.target.value)} 
         />
       </form>
       <Notification />
     </ThemeProvider>
  );
};

export default MyLoginPage;

你能帮我看看有什么问题吗？我正在按照文档学习框架。
这是 React Admin 的链接 page .

Answer 1

在该特定示例中， react 管理员 团队更专注于解释自定义登录功能而不是样式。
目前，您可以根据自己的学习目标做两件事:

方法一
删除 <ThemeProvider>完全，如果您只关注登录功能。只需将其替换为 React.Fragment因为您需要附上剩余的两个组件。

const MyLoginPage = (props) => {
  // other

  return (
     <> // React.Fragment (shorthand)
       <form onSubmit={submit}>
         <input ... /> 
         <input ... />
       </form>
       <Notification />
     </>
  );

方法二
直接解决错误/警告。 theme prop 预计将传递给 MyLoginPage成分。但是从该示例的定义方式来看，您必须通过 MyLoginPage直接到<Admin>成分。因此，在这个学习阶段，最好的方法是定义一个 theme在该脚本文件中(在定义 MyLoginPage 的地方)。

// Add/update the following
import { createMuiTheme } from '@material-ui/core/styles';

// define a theme, for example...
const MyTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#000',
    },
    secondary: {
      main: '#fff',
    },
  },
});

/** 
 * Pass the defined theme to the "theme" prop
 * So in essence, your "theme" prop is never "undefined"
 * because it always falls back to the "default" MyTheme
 */
const MyLoginPage = ({ theme = MyTheme }) => {
  // other

  return (
     <ThemeProvider theme={theme}>
       <form onSubmit={submit}>
         <input ... /> 
         <input ... />
       </form>
       <Notification />
     </ThemeProvider>
  );
};