如何使用 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>
    );
  }
}

Answer 1

来自doc：

style -> object -> Override the inline-styles of the root element.

inputStyle -> object -> Override the inline-styles of the TextField's input element.

etc.

所以你可以这样做：

 <TextField
     hintText=".."
     ref=".."
     style ={{width: '100%'}}
     inputStyle ={{width: '100%'}}
 />

也许还可以通过为组件提供 id 或 className，并使用 css 进行定位（添加 !important）：

 <TextField
     id="myId"
     className="myClass"
 />

 -----

 .myId{
      width: 100% important!;
  }

Answer 2

您可以像下面那样在元素上指定内联样式

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

或者您也可以按照下面的方式进行操作。

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

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 inline style best practices

Answer 3

您也可以查看 fullWidth property 以确保设置正确。

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

Answer 4

如果你想让 TextField 的宽度扩展到父级 (width: 100%) 的宽度：

<TextField label="Full width" fullWidth />

如果要将 TextField 的宽度设置为精确值：

<Box width={350}>
  <TextField label="width: 350px" fullWidth />
</Box>

如果不想添加wrapper组件，也可以直接设置TextField的样式：

V5

<TextField label="width: 350px" sx={{ width: 350 }} />

V4

const useStyles = makeStyles({
  root: {
    width: 350
  }
});

function App() {
  const classes = useStyles();
  return <TextField label="width: 350px" className={classes.root} />;
}

我建议您不要像其他答案中建议的那样使用内联样式，因为内联样式更难覆盖。您应该默认使用 Material-UI styles because it's more flexible and better integrated with Material-UI components. For example, you can cherry-pick 和 sub-components 来覆盖较大的组件，或样式伪类和元素，这是内联样式无法完成的。

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

How to override the width of a TextField component with react MUI?

javascript

reactjs

reactive-programming

material-ui

现场演示