score:2

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

enter image description here

Live demo

Edit sad-resonance-u6y9d

score:1

Did you try to use variant attribute with value outlined?

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

Related Query

More Query from same tag