Material-UI 和 reactJS 组件总是相互重叠

Question

我将 Meterial-UI、ReactJS 和 Bootstrap 用于网格机制。我对 material-ui 有疑问，例如，我想在同一行中有 4 个文本字段，但无论我尝试了什么，它们总是重叠，即使我用列类包装容器，就像在下面的代码。有谁知道我该如何解决这个问题？

<div className="row">
                            <div className="col-sm-3">

                                    <SelectField
                                        className="col-sm-3"
                                        value={this.state.value}
                                        onChange={this.handleYearChange}
                                        maxHeight={200}
                                    >
                                        {years}
                                    </SelectField>

                            </div>
                            <div className="col-sm-3">

                                    <TextField
                                        className="col-sm-3"
                                        hintText="Plot Area"
                                    />

                            </div>
                            <div className="col-sm-3">
                                <div className="form-group">
                                    <TextField
                                        className="col-sm-3"
                                        hintText="Base Area"
                                    />

                                </div>
                            </div>
                            <div className="col-sm-3">
                                <div className="input-group">
                                    <TextField
                                        className="col-sm-3"
                                        hintText="Best Price"
                                    />
                                </div>
                            </div>
                        </div>

Answer 1

好的，我找到了解决方案。要成为固定到父容器的文本字段，您应该添加属性 { fullWidth={tue} }。

  <TextField
     hintText="Base Area"
     fullWidth={true}
   />