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}
   />