Reactjs TextField不'；当fullWidth为true时，不渲染

我有一个React应用程序，我正在使用。由于某种原因，当我将

全宽

标记为

真

时，只显示输入字段的轮廓。如果我将

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>
        );
    }
}

从“React”导入React；
从'@material/react text field'导入文本字段，{HelperText，Input}；
导入“/LoginBox.scss”；
导出默认类LoginBox扩展React.Component{
状态={值：“”}；
render（）{
返回(
登录
输入用户名或电子邮件地址和密码以登录


this.setState（{value:e.currentTarget.value}）
/>
);
}
}

---

有人能解释一下为什么更改此

fullWidth

属性会导致此行为发生吗？

使用

流体

而不是

fullWidth:true

解决方案：

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

---

使用

流体

代替

全宽：真

解决方案：

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

这没有帮助。结果与将

fullWidth

设置为

false

相同。它没有延伸到容器的末尾，如我的第一个屏幕截图所示。尝试使用内联css:style={{{width:100%}}这没有帮助。结果与将

fullWidth

设置为

false

相同。它不会延伸到容器的末尾，如我的第一个屏幕截图所示