我试图缩小TextField组件的宽度:

以下是渲染方法:

  render() {
    return (
      <div>
          <div>
            <form onSubmit={this.handleSubmit}>
                <TextField
                  hintText="Email"
                  ref="email"
                /><br/>
                <TextField
                  hintText="Password"
                  type="password"
                  ref="password"
                /><br/>
              <button className="btn btn-success" onClick={this.loginCommand}><i className="fa fa-sign-in"/>{' '}Log In</button>
            </form>
          </div>
      }
      </div>
    );
  }
}

enter image description here

推荐答案

您还可以查看fullWidth property,以确保其设置正确.

<TextField
      id="full-width-text-field"
      label="Label"
      placeholder="Placeholder"
      helperText="Full width!"
      margin="normal"
      fullWidth // this may override your custom width
/>

Reactjs相关问答推荐

当我在React中使用类方法更新模型的状态时,它在严格模式下触发两次

react ';S使用状态不设置新状态

在新屏幕上显示照片时出现问题-react

Next.js Next-Auth登录函数重定向到http://localhost:3000/api/auth/error

在ReactJS的monaco编辑器中添加美人鱼语法

生产部署:控制台中 Firebase 无效 api 密钥错误

是否可以直接在 jsx 标签上使用 CSS 定义的 colored颜色 ?

useEffect内部的RETURN语句在首次按钮点击事件中似乎无效的原因是什么?

如何到达类组件中的状态?

React js中不记名令牌中的空间问题

next js 13 在获取中使用标头时动态渲染而不是静态渲染?

使用 React Router v6 监听来自不同组件的组件状态变化

使用 React.lazy 调试 webpack 代码拆分

我应该使用 useEffect 来为 React Native Reanimated 的 prop 值变化设置动画吗?

在 Formik 表单中访问子组件的值

React Router 6.4CreateBrowserRouter子元素不显示

将 dict 值转换并插入到react 钩子的列表中

如何防止 mui x-date-picker 被截断?

试图将页面限制为仅登录但有条件的用户似乎永远不会运行

Material UI 安装和 React v. 18.2 出现问题