How to convert simple CSS into makeStyles for React? - reactjs

Question

How to convert simple CSS into makeStyles for React?
I have added style to the TextField to make it stretchable vertically, by using the attribute resize. It is working, actually. Below is the original code I have that I need to refactor.
<div className="mb-4 stretchable">
<style>{"\
.stretchable textarea{\
resize:vertical;\
}\
"}
</style>
<TextField
multiline
label="取材メモ"
className={classes.meetingLogContent}
rows={8}
name='content'
value={meetingLogData.content}
onChange={handleChange}
variant="outlined"
fullWidth
/>
</div>
It is just that our client wanted the style I added to be converted into makeStyle. And it could not target the TextField and does not make it stretchable.
const useStyles = makeStyles(() => ({
meetingLogContent: {
resize: 'vertical',
},
}))
After that I instantiated it into classes.
const classes = useStyles()
And applied the newly instantiated variable to the textfield.
<TextField className={classes.meetingLogContent} />
Am I missing something here? Thanks in advance for your help.

Answer 1

You should apply resize to a div that contains TextArea and not to the TextArea itself. Something like:
<div className={classes.meetingLogContent}>
<TextField
multiline
label="取材メモ"
rows={8}
name='content'
value={meetingLogData.content}
onChange={handleChange}
variant="outlined"
fullWidth
/>
</div>
Then your useStyles:
const useStyles = makeStyles(() => ({
meetingLogContent: {
resize: 'vertical',
overflow: 'auto' //<-- don't forget overflow to auto
},
}))
The result is:
Here a codesandbox example.