0
277
Vistasel botón de carga de material-ui de reacción se ve raro
Seguí este documento MUI
sin embargo, los resultados se ven diferentes. La interfaz de usuario apareció con el botón de interfaz de usuario. Esto debería mostrar solo la interfaz de usuario del botón, no la interfaz de usuario.
Sé que puedo manejar este problema agregando la propiedad sx={{diplay:'none'}}, ¡y funciona!
Me pregunto si hay un error que cometí o si alguien está experimentando este problema.
a continuación está mi código
import React from 'react' import { Button, Box, Stack, Input, Typography, IconButton } from '@mui/material' import { PhotoCamera, Delete, Send, Alarm, AddShoppingCart } from '@mui/icons-material' function PlainButton() { return ( <Stack spacing={3}> <Box> <Typography sx={{marginTop:1, marginLeft:1}}>Upload Button</Typography> <label htmlFor="contained-button-file"> <Input accept="image/*" id="contained-button-file" multiple type="file"/> <Button variant="contained" component="span"> Upload </Button> </label> <label htmlFor="icon-button-file"> <Input accept="image/*" id="icon-button-file" type="file" sx=/> <IconButton color="primary" aria-label="upload picture" component="span"> <PhotoCamera /> </IconButton> </label> </Box> </Stack> ) } export default PlainButtonesta es mi información de versión
versión de reacción: 18.2.0
@emoción/reaccionar: 11.9.3
@emoción/estilo: 11.9.3
@mui/iconos-material: 5.8.4
@mui/material: 5.8.4
el navegador es cromo
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
En la documentación de MUI también están usando display: none como puede ver aquí:
import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import PhotoCamera from '@mui/icons-material/PhotoCamera'; import Stack from '@mui/material/Stack'; const Input = styled('input')({ display: 'none', }); export default function UploadButtons() { return ( <Stack direction="row" alignItems="center" spacing={2}> <label htmlFor="contained-button-file"> <Input accept="image/*" id="contained-button-file" multiple type="file" /> <Button variant="contained" component="span"> Upload </Button> </label> <label htmlFor="icon-button-file"> <Input accept="image/*" id="icon-button-file" type="file" /> <IconButton color="primary" aria-label="upload picture" component="span"> <PhotoCamera /> </IconButton> </label> </Stack> ); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta