使用react-bootstrap调整logo尺寸并实现文件上传表单缩窄居中

问题根因排查&解决方案 #

1. 自定义样式不生效/Logo尺寸调整问题

• 不要将link样式引入标签写在组件的render函数内，这会导致样式加载顺序不稳定，很容易出现Bootstrap样式覆盖自定义CSS的问题。请将Bootstrap和App.css的引入代码移到项目入口public/index.html的<head>标签中。
• 你当前设置的.App-logo {height: 1vmin}本身尺寸已经极小，若还是看不到生效，可先通过内联样式测试优先级问题：

<img src={logo} className='App-logo' alt='logo' style={{height: '40px'}} />

确认生效后再调整自定义CSS的优先级，比如调整样式引入顺序，或给需要的属性加!important强制生效：

.App-logo {
  height: 40px !important; /* 按需调整数值即可 */
  pointer-events: none;
}

2. 文件上传表单缩窄居中问题

直接利用Bootstrap自带的工具类即可实现，不需要额外写自定义CSS：给包裹表单的#Main容器添加栅格、宽度、居中相关类名即可，修改后代码如下：

<div id='Main' className="container w-50 mx-auto">
  {this.state.statusElement}
  <Form.Group controlId="formFile" className="mb-3" onChange={this.onFileChange.bind(this)} required>
    <Form.Label>Test Data</Form.Label>
    <Form.Control type="file" />
  </Form.Group>
  <Button variant="outline-primary" onClick={this.onSubmit.bind(this)} >Upload</Button>{' '}
</div>

• w-50代表宽度为父容器的50%，可按需替换为w-25/w-75，也可自定义宽度比如style={{width: '400px'}}
• mx-auto代表水平方向自动外边距，实现居中效果
• 如果你需要按钮也居中，给外层容器再加text-center类即可

无用代码清理

你现有CSS里的.form-inline规则既没有写单位width: 100是无效属性，且你的业务代码里没有用到这个类，可直接删除。

内容的提问来源于stack exchange，提问作者bayesianpower