如何让 Button 和 TextField 完美匹配？

Question

I'm trying to make a form using Material UI and React . This is what I have so far:

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

The result is the following screenshot:

But wait! Can you see that? The Button height and the TextField height are just so slightly misaligned! (By 2.5px I think). Is there any way to fix this?

This is better than earlier, where the TextField was a lot bigger than the Button (my fix was size="small" on the TextField).

How can I make sure that the TextField and the Button are the same height?

I know that in Bulma there's something like a level component that helps out with that, so is there any similar solution in Material UI ?

Answer 1

You can make your custom <Button> styled as you want .

Lets create <StyledButton> by overwriting style (padding) of outlined and large variant of button .

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);

Then you can use it in your component:

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

Result:

Live demo

Answer 2

您是否尝试使用带有outlined值的variant属性？

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