选择组件上的材料 UI 标签错位

Question

我有一个显示在模态组件内的表单，其中包含多个文本输入和选择组件，但不知何故，选择标签显示在表单的左上角。我遵循here 解释的解决方案，但我得到了相同的结果。另一个问题是，当单击一个“选择”时，另一个似乎已链接并显示为重点。我对材料没有经验，我只使用了几天。我真的很喜欢它，但我有点迷失在这里。此外，左侧的 Select 未与 Text 输入对齐。

这是对话框/表单代码。忽略 Select onChange 事件函数

            {/* Modal Dialog to add the Form*/} 
        
            <Dialog maxWidth="100" open={createOpportunity} onClose={handleDialogClose}>
                <DialogTitle align='center' id="form-dialog-title">Add New Opportunity</DialogTitle>
                <FormControl className={classes.formMainClass}>
                    <div className='formDivs'> 
                        <TextField autoFocus margin="dense" id="name" label="Opportunity Name" type="text" fullWidth/>
                        <TextField margin="dense" id="address" label="Address" type="text" fullWidth/>
                        <TextField margin="dense" id="city" label="City" type="text" fullWidth/>
                        <div className='state-zip'>
                            <InputLabel htmlFor="state">State</InputLabel>
                            <Select fullWidth inputProps={{id: "state"}} value={value} onChange={event => setValue(event.target.value)}>
                               <MenuItem value="">Empty Value for First Option</MenuItem>
                               <MenuItem value="Hey">Hey</MenuItem>
                            </Select>
                            <span> </span>
                            <TextField margin="dense" id="zip" label="Zip" type="text" fullWidth/>
                        </div>
                        <TextField margin="dense" id="architect" label="Architect" type="text" fullWidth/>
                        <TextField margin="dense" id="consultant" label="Consultant" type="text" fullWidth/>
                        <TextField margin="dense" id="duedate" label="Due date" type="date" fullWidth InputLabelProps={{shrink: true}}/>
                    </div>
                    <div className='formDivs'>
                        <InputLabel htmlFor="manager">Manager</InputLabel>
                        <Select fullWidth inputProps={{id: "manager"}} value={value} onChange={event => setValue(event.target.value)}>

                        </Select>
                        <div className='state-zip'>
                            <InputLabel htmlFor="status">Status</InputLabel>
                            <Select fullWidth inputProps={{id: "status"}} value={value} onChange={event => setValue(event.target.value)}>

                            </Select>
                            <span> </span>
                            <InputLabel htmlFor="source">Source</InputLabel>
                            <Select fullWidth inputProps={{id: "source"}} value={value} onChange={event => setValue(event.target.value)}>

                            </Select>
                        </div>
                        <TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="description" label="Description" type="text" fullWidth/>
                        <TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="notes" label="Notes" type="text" fullWidth/>
                    </div>
                </FormControl>
                <DialogContent>
                <DialogContentText>Opportunities text.</DialogContentText>
                    
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={handleDialogClose} color="primary">Cancel</Button>
                        <Button onClick={handleDialogClose} color="primary">Save</Button>
                    </DialogActions>
            </Dialog>

样式代码

.opportunities {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    width: auto;
}

.top-buttons {
    margin-top: 15px;
    margin-bottom: 0;
    width: 90%;
}

.formDivs {
    width: 50%;
    margin: 1% 3%;
}

.state-zip, .manager {
    display: flex;
    flex-direction: row;
}

非常感谢任何建议、意见或建议。

Answer 1

问题正在发生，因为您以错误的方式使用了 FormControl 元素。此元素用于获得对单个表单输入的额外控制/特性/功能。
因此，如果您打算使用FormControl 功能并使用div 或form 作为包装元素而不是FormControl 在当前代码中使用FormControl，则单独使用FormControl 包装您的输入元素（form 会更好)。

Here 是相关答案

这是一个带有form标签的工作演示：