如何使 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

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

How to make Material UI TextField to have same width as content?

reactjs

material-ui

jss