过一段时间再找答案吧！对Field组件本身进行样式化是不可能的，因为它是由其他元素组成的，但是你可以对materialUI组件内部的元素进行样式化：

shopForm: {
    textAlign : 'center',
'& input' :{
    width: '60%',
    color:'grey'
   },
'& label':{
  fontSize:'15px'
}

所以你必须先找到你想要样式化的元素，然后再给父类给予样式。

<Grid 
  item
  lg={4}
  className={classes.shopForm}
>
  <Field
    name="name"
    type="text"
    label="name"
    component={TextField}
  />
  <Field
    name="plaque"
    type="text"
    label="plaque"
    component={TextField}
  />
  <Field
    name="unit"
    type="text"
    label="unit"
    component={TextField}
  />
  <Field
    name="text"
    type="text"
    label="text"
    component={TextField}
    multiline
    row={3}
  />
</Grid>

更新

因为我在任何地方都没有找到答案，所以在其他类中样式化类（只有当类来自classes对象时才有效）

parentClass:{
   ...styling 
           '& $childClass': {
               ...styling 
        },

        // in my case I needed psuedo-class
           '&:hover': {
               '& $childClass': {
                   ...styling 
            },}
}

并且如果子类不是来自material-ui类并且是字符串

parentClass:{
           '& .childClass': {
               ...styling 
        },

}

你可以这样试试

//create a css what you want 
const styles = {
      shopForm: {
       textAlign : 'center',
     },
     field :{
        width: '60%'
     }
}

 <Grid item lg={4} style={styles.shopForm}>
     <Field
        name="name"
        type="text"
        label="name"
        component={TextField}
        style={styles.field} //add the style to the Field
      />
 <Grid >

你可以添加className到字段和添加CSS：

<Grid item lg={4} className={classes.shopForm}>
    <Field
        className="grid-field"
        name="name"
        type="text"
        label="name"
        component={TextField}
    />
    <Field
        className="grid-field"
        name="plaque"
        type="text"
        label="plaque"
        component={TextField}
    />
    <Field
</Grid>

创建一个普通的CSS文件：

.grid-field {
    font-size: 20px;
}