如何使用 React MUI 覆盖 TextField 组件的宽度？

Question

我正在尝试减小 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>
    );
  }
}

原文由 Nicolas Henin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您还可以查看 fullWidth 属性 以确保其设置正确。

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

原文由 Anton Pelykh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在元素上指定内联样式，如下所示

  <TextField
        hintText="Email"
        ref="email"
        style = {{width: 100}} //assign the width as your requirement
   />

或者你可以像下面那样做。

声明一个 styles 具有 css 属性的变量。

 var styles = StyleSheet.create({
    textFld: { width: 100, height: 40}   //assign the width as your requirement
});

在您的 render 代码中将其分配给 style 。

 <TextField
              hintText="Email"
              ref="email"
              style = {styles.textFld}
            />

试一试让我知道它是否适合你。我也是 React js 的新手。

为了清楚起见，您可以参考有关 SO 的文档和其他类似问题。 http://facebook.github.io/react-native/docs/style.html#content

http://facebook.github.io/react-native/

http://facebook.github.io/react-native/docs/flexbox.html#content

React.js 内联样式最佳实践

原文由 pratikpawar 发布，翻译遵循 CC BY-SA 3.0 许可协议