Since I am using Material-UI, the traditional methods are not working for me. I have a form with two buttons positioned next to each other. One button is an "Upload File" input for users to upload a file, and the other is a submit button. I want both buttons to have the same style, but because the "Upload File" is an input element, I'm wondering if it's possible to achieve this with CSS. Can I customize the styling of the Upload File Button?
https://i.sstatic.net/NVB7M.png
<Grid item xs={12}>
<FormControl>
<Input
name='uploadFile'
type='file'
required={true}
onChange={(e) => setUploadFile(e.target.files)}
/>
</FormControl>
</Grid>
<Grid item xs={12}>
<Button
variant="contained"
color="primary"
type="submit"
disabled={submitting}
>
Submit
</Button>
</Grid>
I have attempted to use CSS to style the Upload File Button, but so far I have only been able to change the color of the text:
input[type="file"] {
top: 10px;
left: 8px;
font-size: 17px;
color: #b3e5fc;
}