设置材质 UI 选择/下拉宽度答案

【问题标题】：Setting Material UI select / Drop Down width设置材质 UI 选择/下拉宽度
【发布时间】：2020-04-28 17:02:33
【问题描述】：

我有一个 material-ui 网格设置。每个<Grid> 都有<Paper> 以准确显示网格的位置。在每个 <Paper> 中，我有一个 <DropDown>（这是 Material-UI 上的自定义包装器 Select。我希望这些 DropDown 组件填充父组件 (<Paper>)。

DropDown 组件的代码和样式几乎一字不差地基于 Material UI 选择代码示例。每个DropDown 组件的代码是：

const useStyles = makeStyles(theme => ({
    formControl: {
        margin: theme.spacing(1),
        minWidth: 120,
    },
    selectEmpty: {
        marginTop: theme.spacing(2),
    },
}));

function DropDown(props) {
    const classes = useStyles();
    const inputLabel = React.useRef(null);
    const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() => {
        setLabelWidth(inputLabel.current.offsetWidth); 
    }, []);


    const handleValueChange = (e) => { 
        if (props.alternateChangeHandler) {
            props.alternateChangeHandler(props.currentEventID, props.id, e.target.value);
        } else {
            props.SEQuestionValueChange(props.currentEventID, props.id, e.target.value);
        }
    };

    return <FormControl className={classes.formControl}>
        {(props.label != null)
            ? <InputLabel htmlFor={props.id}>{props.label}</InputLabel>
            : null
        }
        <NativeSelect
            value={props.value}
            onChange={handleValueChange}
            inputProps={{
                name: props.label,
                id: props.id,
            }}
        >
            {props.includeBlank ? <option key="nada" value="" /> : null}
            {Object.keys(props.options).map((optionLabel, index) =>
                <option key={optionLabel} value={props.options[optionLabel]}>{optionLabel}</option>
            )}
        </NativeSelect>
        {/* <FormHelperText>Some important helper text</FormHelperText> */}
    </FormControl>

我没有得到我希望的宽度......你可以在这里看到：

如您所见，DropDown 没有填充 <Paper>... 并且没有根据标签大小适当调整大小。

我错过了什么？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

我通过将表单控件标记更改为以下方式解决了这个问题：

...但是由于边距和其他原因，这将选择比<Paper> 推得更宽...所以我通过将
paddingRight: '20px' 添加到formControl 样式来缩小它。

更深入地看，fullWidth={true} 只是简单地将 width='100%' 添加到样式中......所以它也可以。

【讨论】：