Как сделать так, чтобы Button и TextField имели идеальный шаг?

Question

Я пытаюсь создать форму, используя Material UI и React. Вот что у меня есть:

import React from 'react'
import {Button, TextField} from '@material-ui/core'
import AddIcon from '@material-ui/icons/Add'
import PropTypes from 'prop-types'

class AddItem extends React.Component {

    state = {
        text: ''
    }

    handleChange = e => {
        this.setState({text: e.target.value})
    }

    render() {
        return (
            <form onSubmit={this.props.onSubmit(this.state.text)}>
                <TextField id="task" label="Task" placeholder="e.g. Feed the fish" value={this.state.text}
                           onChange={this.handleChange} color="secondary" variant="outlined" size="small"/>
                <Button color="secondary" variant="outlined" endIcon={<AddIcon/>} size="large">
                    Add
                </Button>
            </form>
        )
    }
}

AddItem.propTypes = {
    onSubmit: PropTypes.func.isRequired
}

export default AddItem

В результате получается следующий снимок экрана:

Но подождите! Вы можете видеть, что? Высота Button и высота TextField слегка смещены! (По 2.5px я думаю). Есть ли способ это исправить?

Это лучше, чем раньше, когда TextField был намного больше, чем Button (мое исправление было size="small" в TextField).

Как я могу убедиться, что TextField и Button имеют одинаковую высоту?

Я знаю, что в Bulma есть что-то вроде level компонента, который помогает с этим, есть ли подобное решение в Material UI?

Answer 1

Вы можете сделать свой собственный <Button> стилизованным так, как вы хотите .

Позволяет создать <StyledButton>, переписав стиль (отступ) выделенный и большой вариант кнопки .

import { withStyles } from "@material-ui/core/styles";

const styles = {
  outlinedSizeLarge: {
    padding: "6px 21px" // default is "7px 21px" https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L202
  }
};

const StyledButton = withStyles(styles)(Button);

Затем вы можете использовать его в своем компоненте:

<form onSubmit={this.props.onSubmit(this.state.text)}>
    <TextField id="task" label="Task" placeholder="e.g. Feed the fish" value={this.state.text} onChange={this.handleChange} color="secondary" variant="outlined" size="small"/>
    <StyledButton color="secondary" variant="outlined" endIcon={<AddIcon/>} size="large">Add</StyledButton>
</form>

Результат:

Live демо

Answer 2

Вы пытались использовать атрибут variant со значением outlined?

<Button variant='outlined' size='small'>Add</Button>