No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Colocando los estilos del buscador

12/24
Recursos

Aportes 5

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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;

Así va la UI del proyecto

Para lo que se aparecen error en icono recuerde que hay que instalar
npm install @mui/icons-material
yarn add @mui/icons-material

Para no forzar el estilo con CSS. Les dejo la docu
https://mui.com/material-ui/react-text-field/

Y mi código

 <Stack
      sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}
    >
      <TextField
        id="outlined-basic"
        variant="outlined"
        label="GitHub User"
        placeholder="fidelp27"
        sx={{ width: '80%', marginTop: '30px' }}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <SearchIcon />
            </InputAdornment>
          ),
        }}
      />
    </Stack>

📕 Documentación de Text field

https://mui.com/material-ui/react-text-field/#main-content