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