如何使 Material UI TextField 与内容具有相同的宽度？

Question

基于文档：看起来材质 ui 只能做 fullWidth 或固定宽度。我希望宽度与其中的内容相同。例如，如果它是一个长 url 文本框，我希望它是 url 的长度。

Answer 1

如果您想更改您的 ，您应该控制父 div 的宽度textField，下面是一个示例，您在键入 a 时更改宽度word。请记住，这只是一个示例，您的逻辑应该有所不同，

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { width: 20 }
  }

handleChange = () => {
    if(this.state.width === 80){
    return;
    }
    this.setState({ 
    width: this.state.width + 10
  });

}

  render() {
    return (
      <div >
        <div style={{width: `${this.state.width}%`}}>
            <TextField name="email" hintText="Email" fullWidth onChange={this.handleChange}/>
          </div>
          <TextField name="pwd" type="password" hintText="Password" />
      </div>
    );
  }
}

在这里试试https://jsfiddle.net/prakashk/14dugwp3/37/#&togetherjs=h6bNchy1iw