styling element inside class material ui

Find some kind of answer after a while!Styling Field component itself is impossible because it's made of other elements, but you can style elements which are inside materialUI component:

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

so you have to find which element you want to style first and then give style to the parent's class.

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

Update

as I didn't found an answer anywhere, to style class inside other class(only work if class is from classes object)

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

and if child class is not from material-ui classes and is string

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

You can try like this

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

You can add classNames to fields and add 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>

and make a normal css file:

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