Question

如果我使用TextField组件，并设置InputLabelProps = {{shrink：true}}，则Label停留在TextField的顶部，并且轮廓线被切割以正确显示Label。

但是，如果我使用Select组件，如下所示：

<FormControl variant={ this.props.variant }  className={ classes.formControl } fullWidth>
            <InputLabel
                ref={ (input) =>{ this.inputLabel = input }}
                htmlFor={ this.props.id }
                shrink={ true }>
                { this.props.label }
            </InputLabel>
            <Select
                id={ this.props.id }
                value={ this.props.value }
                onChange={ this.onChange }
                input={
                    <OutlinedInput
                        labelWidth={ this.state.labelWidth }
                        name={ this.props.id }
                        id={ this.props.id }
                    />
                    }
                >
                { this.props.options.map(option => (
                    <MenuItem key={ option.value } value={ option.value }>
                        <em>{ option.label }</em>
                    </MenuItem>
                ))}
            </Select>
        </FormControl>

Label像TextField一样位于轮廓的顶部，但是，轮廓并未被切掉以很好地显示Label，而是看起来像是“划掉”了

我在做什么错？（请不要，即使我对此进行了硬编码，this.state.labelWidth的值也正确）

在此先感谢您的帮助干杯杰森

Answer 1

默认行为是由Material-UI自动管理shrink的{{1}}属性。通常，InputLabel仅在shrink具有非空值或具有焦点时才应用。如果您想一直应用Select，则还需要在shrink上指定notched，因为那样可以控制轮廓上标签的空间。

以下代码显示了两种情况（1.始终应用OutlinedInput和shrink，2。让Material-UI管理notched和shrink）：

notched

选择，为空时带有收缩属性的OutlineInput标签与TextField不同

1 个答案: