如何让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>结果：

Answer 2

您是否尝试使用variant带有 value 的属性outlined？<Button&nbsp;variant='outlined'&nbsp;size='small'>Add</Button>