I have the following React JS code for a form. I have heavily simplified the code to get to the root of the problem.

Links to imports: Icon and Form

import Icon from "semantic-ui-react";
import Form from "react-bootstrap/Form";
import {FormControl, InputGroup} from "react-bootstrap";

<Form onSubmit={e=> {handleInput(e)}}>
  <FormControl
     //stuff here
  />
  <InputGroup.Append>
     <InputGroup.Text className="field">
         // the bottom class removes all button styling
         // so that InputGroup.Text styling is used
         <button type="submit" className="no-btn-style">
            <Icon name="add">
         </button>
     </InputGroup.Text>
   </InputGroup.Append>
 </Form>

The CSS styling for .no-btn-style:

.no-btn-style, input[type="submit"], .no-btn-style:hover, .no-btn-style:focus {
  background: none !important;
  color: none !important;
  border: none !important;
  padding: 0 !important;
  font: none !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}

The InputGroup.Append is the entire grey box on the right:

Here is the size of the button inside InputGroup.Append:

I need to be able to have the entire grey region (shown in red) be the button. I was thinking that the button could inherit the size of the InputGroup.Text. But when I add this to the class I defined above, it isn't working:

height: inherit !important;
width: inherit !important;