Is it possible to style all Field
s 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>
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
},
}