Una mejor manera de implementar el icono dentro del input es usando una prop llamada InputProps.
.
A esta se le pasa un objeto que tendrá como llave (key) endAdorment y como valor (value) lo que queremos dentro del input. En este caso es un botón con un icono de buscar. No olvidar encerrar el codigo de retorno entre parentesis.
.
Nota: los estilos los estoy usando con variables para ver el código mas limpio.
.
Entonces, quedarÃa asà el código:
import React from "react";
import { Stack, TextField, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
const Searcher = () => {
const estilos = {
marginTop: "30px",
width: "80%",
};
const styleTextField = {
width: "90%",
margin: "0 auto",
};
return (
<Stack sx={estilos} direction="row">
<TextField
sx={styleTextField}
type="search"
autoComplete="off"
label="Github User"
id="outlined-basic"
placeholder="Octocat"
// 🔽🔽🔽
InputProps={{
endAdornment: (
<IconButton>
<SearchIcon />
</IconButton>
)
}}
/>
</Stack>
);
};
export default Searcher;
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?