Question

我有一个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>

我无法获得我想要的宽度...正如你在这里看到的那样：

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

我想念什么？

Answer 1

我通过将表单控制标签更改为此来解决了这个问题：

...但是由于边距和其他原因，会使选择范围比<Paper>宽一点，所以我通过添加
将其缩小 paddingRight: '20px'到formControl样式。

更深入地看，fullWidth = {true}只是将width ='100％'添加到样式中，因此也可以做到。

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

1 个答案: