在顶部材质 UI 上垂直对齐文本<Textfield />

Question

I have this component

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

class Foo extends React.component { 
    ...

    <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?

Answer 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.component { 
    ...
    <form className={classes.container}>
       <TextField
         ... />
    </form>
}

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

Check this out for more about flexbox