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

【问题标题】：How to make Material UI TextField to have same width as content?如何使 Material UI TextField 与内容具有相同的宽度？
【发布时间】：2018-07-23 08:08:44
【问题描述】：

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

【问题讨论】：

标签： reactjs material-ui jss

【解决方案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

【讨论】：