I have this ponent

const styles = theme => ({
  height: {
    height: '20rem',
  },
});

class Foo extends Reactponent { 
    ...

    <TextField
      InputProps={{ classes: { root: this.props.classes.height } }}
      label="Kittens"
      placeholder="Meooow"
      fullWidth={true}
      margin="normal"
      variant="outlined"
      notched={true}
      value={this.state.kittyCat}
      onChange={event => this.onChangeKittens(event)}
      multiline={true} />
}

The height is applied, making the <TextField /> bigger. However, I want to align the text vertically in the <TextField />.

How do I do this?

I have this ponent

const styles = theme => ({
  height: {
    height: '20rem',
  },
});

class Foo extends React.ponent { 
    ...

    <TextField
      InputProps={{ classes: { root: this.props.classes.height } }}
      label="Kittens"
      placeholder="Meooow"
      fullWidth={true}
      margin="normal"
      variant="outlined"
      notched={true}
      value={this.state.kittyCat}
      onChange={event => this.onChangeKittens(event)}
      multiline={true} />
}

The height is applied, making the <TextField /> bigger. However, I want to align the text vertically in the <TextField />.

How do I do this?

• javascript
• css
• reactjs
• material-ui

Share Follow edited Jun 14, 2019 at 6:46 four-eyes asked Jun 13, 2019 at 7:28 four-eyesfour-eyes 12.5k3737 gold badges130130 silver badges255255 bronze badges 2

• 2 You want to align the text vertically in the? – nimsrules Commented Jun 13, 2019 at 7:50
• 1 @Nimsrules Ups. forgot the closing ticks – four-eyes Commented Jun 14, 2019 at 6:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You can align the text vertically using flex, like:

display:flex;
flex-direction: column;
justify-content: center;

However, Material-UI TextField create a div container, which has two inner elements - another div and a label.

The label part has absolute position by default (For the animated label effect), which might make it difficult to achieve what you want without some hairy css overrides.

A better approach might be to set the styles on the TextField container. You can do this using the material-style system as in your example code:

const styles = theme => ({
  container: {
    height: '20rem',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
  },
});

class Foo extends React.ponent { 
    ...
    <form className={classes.container}>
       <TextField
         ... />
    </form>
}

Update: I've added a Demo on sandbox. Update: Fixed brackets

Check this out for more about flexbox