Accepted answer

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"

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>


enter image description here

Live demo

Edit sad-resonance-u6y9d


Did you try to use variant attribute with value outlined?

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

Related Query

More Query from same tag