cssreactjsmaterial-uijss

Styling element inside class Material UI


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>

Solution

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