如何让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 variant='outlined' size='small'>Add</Button>