当flexDirection是行时，资料-ui输入标签被装箱

Question

这情况有点奇怪。我有两个divs在一个FormControl和我的输入标签为Select完全好。但是，当我在flexDirection: 'row'中对它进行样式设置时，标签是超过框的，如下面的图片所示。

编辑:当我注释掉justifyContent.时，它工作得很好。

一切都好的时候。

​

​

当它在flexDirection中时:行

​

​

下面是我的代码

const useStyles = makeStyles((theme) => ({
    submitForm: {
        display: 'flex',
        flexDirection: 'row',
        margin: theme.spacing(1),
        justifyContent: 'space-evenly'
    },
    bacsInputs: {
        minWidth: '200px'
    }
}))

const DemoInventory = () => {

    const bacsInfoInputs = () => {
        return(
            <>
            <p><b>Enter BACS information below and click SAVE</b></p>
            <FormControl variant="outlined" className={classes.submitForm}>
            <div>
                <InputLabel clasName={classes.submitForm} id="demo-simple-select-outlined-label">Select BACS Unit</InputLabel>
                <Select
                    labelId="demo-simple-select-outlined-label"
                    id="demo-simple-select-outlined"
                    value={bacsUnit}
                    onChange={onChangeInput}
                    label="BACS Unit"
                    className={classes.bacsInputs}
                    >
                    <MenuItem value={'Product-1'}>Product-1</MenuItem>
                    <MenuItem value={'Product-2'}>Product-2</MenuItem>
                    <MenuItem value={'Product-3'}>Product-3</MenuItem>
                    <MenuItem value={'Product-4'}>Product-4</MenuItem>
                    <MenuItem value={'Product-5'}>Product-5</MenuItem>
                    <MenuItem value={'Product-6'}>Product-6</MenuItem>
                    <MenuItem value={'Product-7'}>Product-7</MenuItem>
                </Select>
                <p>Serial number input</p>
                <p>Part number input</p>
                <p>Location input</p>
                <p>description input</p>
            </div>
            <div>
                <p>deployment input</p>
                <p>ship Date input</p>
                <p>Expected return date input</p>
            </div>
                <p>Save Button</p>
            </FormControl>
            </>
        )
    }
}

return (
     <Fragment>
       {bacsInfoInputs()}
     </Fragment>
)

Answer 1

这是因为您为FormControl元素提供了一个类FormControl，该元素正在更改其默认样式，因此在选择框中得到了不同的样式。

FormControl元素用于包装输入元素，只是为了获得额外的控制和特性，所以不要在该元素中放置除输入元素之外的任何其他元素。因此，只在本例中放置Select和InputLabel元素以获得更好的结果。