const SearchBar = (text, onChange) ={amp}gt; { return ( {amp}lt;div{amp}gt; {amp}lt;div style={{flexWrap: "wrap", background: 'red', border: "1px solid", borderRadius: 10}}{amp}gt; {amp}lt;Search style={{background: 'blue', verticalAlign: 'bottom'}}/{amp}gt; {amp}lt;input style={{background: 'blue', verticalAlign: 'bottom'}} text={text} onChange={onChange}/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); }; export default SearchBar; 

Aquí está mi código de barras de búsqueda. El resultado es ingrese la descripción de la imagen aquí

pero quiero que se vea así. ingrese la descripción de la imagen aquí

¿Cómo puedo obtener el resultado?

En su componente de Search , haga que el ancho sea del 100%.

 {amp}lt;Search style={{background: 'blue', verticalAlign: 'bottom', width:'100%'}}/{amp}gt; 

Primero importe FaSearch y luego reemplace su código con el mencionado a continuación.

 import { FaSearch } from "react-icons/fa"; const App =(text, onChange)={amp}gt; { return ( {amp}lt;{amp}gt; {amp}lt;div style={styles.mainStyle}{amp}gt; {amp}lt;Search /{amp}gt; {amp}lt;input style={styles.inputStyle} text={"text"} onChange={null} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/{amp}gt; ); } const Search = () ={amp}gt; {amp}lt;FaSearch style={styles.search} /{amp}gt;; const styles = { mainStyle: { display: "flex", flexWrap: "wrap", borderRadius: 10, alignItems: "center", border: "1px solid", overflow: "hidden" }, inputStyle: { flex: 1, border: "none", height: 30 }, search: { fontSize: 30, padding: "0px 10px", cursor: "pointer", borderRight: '1px solid grey' } }; 

Manifestación