Question

我有一个React应用程序，正在使用Material react-text-field。由于某些原因，当我将fullWidth标记为true时，仅显示输入字段的轮廓。如果将fullWidth设置为false，则一切正常（除了我的输入控件不是全角）。

以下是fullWidth为false时的呈现方式的屏幕截图：

这是屏幕截图，显示fullWidth为true时的呈现方式：

请注意，我无法再在文本框中单击或在文本框中键入任何文本，现在也不会显示我的标签。

这是我的JavaScript代码：

import React from 'react';
import TextField, { HelperText, Input } from '@material/react-text-field';

import './LoginBox.scss';

export default class LoginBox extends React.Component {
    state = { value: '' };

    render() {
        return (
            <div className="login-box">
                <div className="caption">
                    <h1>Login</h1>
                    <p>Enter username or email address and password to log in.</p>
                    <hr />
                </div>
                <div className="content">
                    <TextField
                        outlined={true}
                        fullWidth={true}
                        label="Email or Username"
                    >
                        <Input
                            value={this.state.value}
                            onChange={(e) => this.setState({ value: e.currentTarget.value })}
                        />
                    </TextField>
                </div>
            </div>
        );
    }
}

有人可以解释为什么更改此fullWidth属性会导致这种现象发生吗？

Answer 1

使用fluid代替fullWidth: true

解决方案：

 <TextField
   outlined={true}
   fluid
   label="Email or Username"
 >

当fullWidth为true时，TextField不呈现

1 个答案: