当输入类型从“文本”更改为“类型”时，如何解决Form.control输入宽度发生变化的问题？

Question

在页面加载时，输入要显示type = "text"，因为我要显示占位符文本。我在输入上添加了功能，重点是输入类型应为type = "time"。

但是，在更改为type =" time"时，输入宽度也会更改。我想保持宽度与input = "text"上的宽度相同。

这是我的代码：

this.state = {type: 'text'}; 

onFocus() {this.setState({ type: 'time' });}
onBlur() {this.setState({type: 'text'});

<Form.Group>
       <Form.Label >From</Form.Label>
       <Form.Control type={this.state.type} onFocus={this.onFocus} onBlur={this.onBlur} placeholder="Shop opens" />
</Form.Group>

Answer 1

  

在您的scss或css文件中添加以下CSS规则，它将控制您的   在任何时间输入宽度：

<style name="AppTheme" parent="Theme.MaterialComponents.Light">

  

在输入中将此CSS规则应用到react中：

custom-input-width {
  width : 250px !important; // you can set as per your requirement
}