0
276
Viewsreact material-ui upload button look weird
I followed this MUI document
however, the results look different. The UI appeared with the button UI. This should show only the button UI, no UI.
I know i can handle this problem by add sx={{diplay:'none'}} propery, and It is work!
I'm just wondering if there is a mistake I made or if anyone is experiencing this problem.
below is my code
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 PlainButton
this is my version info
react version : 18.2.0
@emotion/react: 11.9.3
@emotion/styled: 11.9.3
@mui/icons-material: 5.8.4
@mui/material: 5.8.4
the browser is chrome
·
Juan Pablo Isaza
1 answers
Answer question0
On MUI documentation they are also using display: none as you can see here:
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
Report
Answer question