如何使用反应材质UI覆盖TextField组件的宽度？

Question

我正在尝试减少该组件的宽度:

https://github.com/callemall/material-ui/blob/master/src/TextField/TextField.jsx

这是渲染方法:

  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

您还可以在React Material UI中使用fullWidth属性.

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

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

将其分配给style您的render代码.

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

试试让我知道它是否适合你.我也是新的反应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内联样式最佳实践

Answer 3

如果您想让TextField的宽度扩展为与父级的宽度 ( width: 100%) 一样多：

<TextField label="Full width" fullWidth />

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

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

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 样式，因为它更灵活并且与 Material-UI 组件集成得更好。例如，您可以挑选要在较大组件中覆盖的子组件，或者设置伪类和元素的样式，这是内联样式无法完成的。

现场演示