Cannot change the placeholder font color

[eide-1]

Describe the bug The default shade of grey used for placeholder text on the MuiFileInput component does not meet the W3C minimum contrast requirement. I tried changing the color of the placeholder text using the sx property, but it does not seem to work. I can easily change the font size using this method, but the color stays the same.

Code used to change font size (this works):

<MuiFileInput
    multiple
    placeholder="Click here and select file(s)"
    value={selectedFiles}
    onChange={handleChange}
    hideSizeText
    sx={{
        '& .MuiFileInput-placeholder': {
            fontSize: 20
        },
    }}
/>

Code used to change font color (this does NOT work):

<MuiFileInput
    multiple
    placeholder="Click here and select file(s)"
    value={selectedFiles}
    onChange={handleChange}
    hideSizeText
    sx={{
        '& .MuiFileInput-placeholder': {
            color: 'black'
        },
    }}
/>

Expected behavior I should be able to change the color of the placeholder text using sx

[viclafouch]

Hello !

Please share a sandbox in order for me to test that

[eide-1]

Hello,

Thank you for your prompt response. Please take a look at the code sandbox I just created. I can easily change the font size of the placeholder text, but I cannot seem to change the color: Demo App - Codesandbox.

Thanks!

[lucasstine-demandiq]

You can get around this with color: "black !important" but this will make the whole sx object to override everything defined there.

[eide-1]

You can get around this with color: "black !important" but this will make the whole sx object to override everything defined there.

Thank you! The suggested fix worked flawlessly.