Настройка UI выбора материала / Ширина раскрывающегося меню

Question

У меня есть сетка материалов-пользовательского интерфейса. Каждый <Grid> имеет <Paper>, чтобы точно показать, где находится сетка. Внутри каждого <Paper> у меня есть <DropDown> (который является пользовательской оболочкой для Material-UI Select. Я хотел бы, чтобы эти компоненты DropDown заполняли родительский компонент (<Paper>).

Мой код и стиль для моего DropDown компонента почти дословно основан на примере кода выбора пользовательского интерфейса для материала. Код для каждого компонента 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>

Я не могу получить ширину I Надеюсь на ... как вы можете видеть здесь:

Как видите, DropDowns не заполняют <Paper> .. И не имеют соответствующего размера в зависимости от размера этикетки.

Чего мне не хватает?

Answer 1

Я решил эту проблему, изменив тег управления формой на следующее:

... но это приводит к тому, что выделение становится немного шире, чем <Paper> из-за полей, а что нет ... поэтому я сократил его вернемся, добавив
paddingRight: '20px' к стилю formControl.

Если заглянуть глубже, fullWidth = {true} просто добавляет ширину = '100%' к стилю в любом случае ... так что это также делает это.