Tengo el siguiente código React JS para un formulario. He simplificado mucho el código para llegar a la raíz del problema.

Enlaces a importaciones: Icono y Formulario

 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>

El estilo CSS para .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; }

InputGroup.Append es el cuadro gris completo a la derecha:

Este es el tamaño del botón dentro de InputGroup.Append:

Necesito poder hacer que toda la región gris (que se muestra en rojo) sea el botón. Estaba pensando que el botón podría heredar el tamaño de InputGroup.Text. Pero cuando agrego esto a la clase que definí anteriormente, no funciona:

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