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

Posted 2023-02-16

【中文标题】如何使用 React MUI 覆盖 TextField 组件的宽度？

【英文标题】：How to override the width of a TextField component with react MUI?

【发布时间】：2016-05-07 16:40:54

【问题描述】：

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

【问题讨论】：

我查看了参数，inputStyle 等...

【参考方案1】：

如果您想让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 styles，因为它更灵活并且与 Material-UI 组件更好地集成。例如，您可以cherry-pick 子组件在较大的组件中进行覆盖，或者设置伪类和元素的样式，这是内联样式无法做到的。

现场演示

【参考方案2】：

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

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

【讨论】：

这不会像 OP 所要求的那样“减少”组件的宽度。在某些情况下，这实际上会增加宽度。

确保用大括号括住 'true' - fullWidth=true

【参考方案3】：

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

  <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
            />

试试吧，让我知道它是否适合你。我也是反应 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

【讨论】：

有效吗？如果宽度为 250 像素，我的文本字段工作正常，但对于较小的宽度，它不起作用

【参考方案4】：

来自doc：

style -> object -> 覆盖根元素的内联样式。

inputStyle -> object -> 覆盖 TextField 输入元素的内联样式。

等等

所以你可以这样做：

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

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

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

 -----

 .myId
      width: 100% important!;