类材质ui中的样式元素

Question

是否可以在material-ui中设置所有Field内部样式Grid？我已经知道如何在CSS中执行此操作，但是我找不到在JS中执行此操作的方法，但是无法正常工作：

const styles = {
  shopForm: {
    textAlign: 'center',
    Field: {
      width: '60%'
    }
  }
}

我应该如何改变styles？这种样式在jss中可能吗？在CSS中用于执行此操作：

.shopForm Field
{...}

我正在使用material-ui

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

Answer 1

过一会儿找到答案！样式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>