Javascript Selectfield、日期选择器的自定义CSS。。。。具有redux表单的材质ui

我使用的是带redux表单的from Material UI，看起来有一个div包装了我的标签，输入…（见图），所以我不能更改这个div的大小，目的是使这些组件响应。在我的col（MaterializeCSS）上，我已经做了一个测试来删除materialize，并将材质UI的系统网格放置在没有任何更改的地方。。。我创建了一个css文件并创建了一个父div（例如：width:80%！important）也没有任何变化。就像你在图片上看到的那样，如果我放置col-md-2，这个div包装不适合我的网格。这是我的密码

import React from "react";
import { connect } from "react-redux";
import { reduxForm, Field } from "redux-form";
import { compose } from "redux";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import SelectField from "material-ui/SelectField";
import DatePicker from "material-ui/DatePicker";
import MenuItem from "material-ui/MenuItem";
import moment from "moment";


class SearchBar extends React.Component {
  onSubmit = formProps => {
    console.log(formProps);
  };

  render() {
    const { handleSubmit } = this.props;

    const renderSelectField = ({
      input,
      label,
      meta: { touched, error },
      children,
      ...custom
    }) => (
      <SelectField
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        onChange={(event, index, value) => input.onChange(value)}
        children={children}
        {...custom}
      />
    );
    const renderDatePicker = ({
      input,
      defaultValue,
      meta: { touched, error },
      label,
    }) => (
      <DatePicker
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        value={input.value !== "" ? new Date(input.value) : null}
        onChange={(event, value) => {
          const formatDate = value;
          const responseDate = moment(formatDate).format("DD/MM/YYYY");
          input.onChange(responseDate);
        }}
      />
    );

    return (
        <MuiThemeProvider>
          <form onSubmit={handleSubmit(this.onSubmit)}>
            <div className="row">
              <div className="col s12 m3">
                <Field
                  name="startDate"
                  type="text"
                  label="Pick up at"
                  component={renderDatePicker}
                  hintText="Checkin Date"
                  autoOk={true}
                />
              </div>
              <div className="col s12 m3">
                <Field
                  name="StartHour"
                  component={renderSelectField}
                  label="Hour"
                >
                  <MenuItem value={"Morning"} label="5 am - 12 pm" primaryText="Morning"/>
                  <MenuItem value={"Afternoon"}label="12 pm - 5 pm"primaryText="Afternoon"/>
                  <MenuItem value={"Evening"} label="5 pm - 9 pm" primaryText="Evening"/>
                  <MenuItem value={"Night"} label="9 pm - 5 am"  primaryText="Night" />
                </Field>
              </div>
            </div>
            <div className="row">
              <button>here</button>
            </div>
          </form>
        </MuiThemeProvider>
    );
  }
}

function mapStateToProps(state) {
  return { auth: state.auth.authenticated };
}

export default compose(
  connect(mapStateToProps),
  reduxForm({ form: "search" })
)(SearchBar);

从“React”导入React；
从“react redux”导入{connect}；
从“redux表单”导入{reduxForm，Field}；
从“redux”导入{compose}；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“物料界面/选择字段”导入选择字段；
从“物料界面/日期选择器”导入日期选择器；
从“物料界面/菜单项”导入菜单项；
从“时刻”中导入时刻；
类SearchBar扩展了React.Component{
onSubmit=formProps=>{
console.log（formProps）；
};
render（）{
const{handleSubmit}=this.props；
常量renderSelectField=({
输入，
标签，
meta:{触摸，错误}，
儿童
…习俗
}) => (
input.onChange（值）}
children={children}
{…自定义}
/>
);
常量renderDatePicker=({
输入，
默认值，
meta:{触摸，错误}，
标签，
}) => (
{
const formatDate=值；
const responseDate=时刻（formatDate）。格式（“DD/MM/YYYY”）；
input.onChange（响应数据）；
}}
/>
);
返回(
在这里
);
}
}
函数MapStateTops（状态）{
返回{auth:state.auth.authenticated}；
}
导出默认组合(
连接（MapStateTops），
reduxForm（{form:“search”}）
)（搜索栏）；