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

Question

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

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