当我将表单组件插入另一个页面时，Material UI 表单输入会变得混乱？ (Next.js)答案

【问题标题】：Material UI form inputs get messed up when I plug the form component into another page? (Next.js)当我将表单组件插入另一个页面时，Material UI 表单输入会变得混乱？ (Next.js)
【发布时间】：2021-03-24 18:04:15
【问题描述】：

我为我的联系表单创建了一个组件，并试图将它导入到我的联系页面上。当我这样做时，输入的样式完全被抛弃了......它们在屏幕右侧显示为小框。我在这里错过了什么？

混乱的表单输入：

这是一个 Next.js 应用程序。我还注意到，在页面的初始加载时，不会出现这个问题......只有在我刷新时才会出现。

这是我的表单组件：

import { 
Button, 
FormControl, 
InputLabel,
OutlinedInput} from '@material-ui/core'; 

import styles from '../styles/ContactForm.module.css';
import { useState } from 'react';

const ContactForm = () => {
const [name, setName] = useState('');
const [phone, setPhone] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');

const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`
        Name: ${name}
        Phone: ${phone}
        Email: ${email}
        Message: ${message}
    `);
};

return (
    <form id={styles.contactForm} onSubmit={handleSubmit}>

        <FormControl 
            fullWidth 
            className={styles.formInput}
            variant="outlined"
            color="primary">

            <InputLabel htmlFor="name">Name</InputLabel>
            <OutlinedInput
                color="primary"
                id="name"
                labelWidth={50}
                value={name}
                onChange={(event) => {setName(event.target.value)}}
                required/>   
        </FormControl>

        <FormControl 
            fullWidth 
            className={styles.formInput}
            variant="outlined"
            color="primary">

            <InputLabel htmlFor="phone">Phone</InputLabel>
            <OutlinedInput
                color="primary"
                id="phone"
                labelWidth={50}
                value={phone}
                onChange={(event) => {setPhone(event.target.value)}}
                required/>   
        </FormControl>
        
        <FormControl 
            fullWidth 
            className={styles.formInput}
            variant="outlined"
            color="primary">

            <InputLabel htmlFor="email">Email</InputLabel>
            <OutlinedInput
                color="primary"
                id="email"
                labelWidth={50}
                value={email}
                onChange={(event) => {setEmail(event.target.value)}}
                required/>   
        </FormControl>

        <FormControl 
            fullWidth 
            className={styles.formInput}
            variant="outlined"
            color="primary">

            <InputLabel htmlFor="message">Message</InputLabel>
            <OutlinedInput
                color="primary"
                id="message"
                labelWidth={50}
                multiline rows={8}
                value={message}
                onChange={(event) => {setMessage(event.target.value)}}
                required/>   
        </FormControl>

        <Button
            variant="contained"
            color="primary"
            type="submit">Submit</Button>

    </form>
  );
};

export default ContactForm;

这是我的联系页面组件（输入被弄乱了）。我唯一拥有的 CSS 是让 .formWrapper 的宽度为 500 像素：

import ContactForm from '../components/ContactForm';
import styles from '../styles/contact.module.css';

const contact = () => {
    return (
        <main id={styles.contact}>

            <section className={styles.formWrapper}>
                <ContactForm />
            </section>

        </main>
    );
};

export default contact;

关于我的输入为什么会这样做的任何想法？

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

事实证明，这里的问题是 NextJS 在服务器上呈现，所以当我重新呈现页面时，MUI 类没有正确匹配。我可以通过遵循此文档来解决问题：

https://material-ui.com/guides/server-rendering/

【讨论】：