CODEWITHSUNDEEP
reactjsmaterial-ui
Nico Nisaw
Nico Nisaw

Reputation: 57

How to convert simple CSS into makeStyles for React?

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.

Upvotes: 1

Views: 157

Answers (1)

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

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:

enter image description here

Here a codesandbox example.

Upvotes: 2

Related Questions