Styling element inside class Material UI [duplicate]

Question

Is it possible to style all Fields inside Grid in Material UI? I already know how to do it in css but I can't find how to do this in jss I've tried this but not working:

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

how should I change styles? is this type of styling possible in jss? in css used to do this :

.shopForm Field
{...}

I'm using MUI

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

Cordelia

Do you have a CSS file? – Sarinasarine

I have scss file @liam but my main question is can I do it like the css way or not – Cordelia

Answer 1

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

}

Cordelia

very helpful answer – Mig

Answer 2

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 >

Wedding

I don't want to use inline styling want to know and know is it possible to style like css way? – Cordelia

Answer 3

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

Reticule

I wanted to avoid giving class to every Field and just give one class to grid – Cordelia

I suppose than you will have to write styles something like .grid > div > div, which is not very effective (content-dependent, css for tag selection, etc.). In HTML it's kind of a normal practice is to give a class to each element that you want to style. – Reticule