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

Question

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

Answer 1

如果要对textField进行更改，则应控制父div的宽度。以下是在键入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