React FileBase64 Styling

Question

How can I style Filebase input button? It looks very ugly and I don't know how customize it...

This is what I have:

 <FileBase
     type="file"
     multiple={false}
     onDone={({ base64 }) =>
     setFormData({ ...formData, avatar: base64 })}
 />

I tried disabling the button like this: style={{display:'none'} but it didn't make any effect.

Answer 1

This component doesn't accept any props other than multiple: boolean and onDone: () => void, therefore it is not possible to style it using a class nor inline styling. Also, explicitly setting the type is useless as it will always be a file input.

A simple solution (and I cannot think of another way) for giving it a custom style would be using the input[type=file] selector in your css file.
Assuming there is one or more file inputs, that you want to apply this style to, the styling can be done at a "global scope" without any specificity.
Otherwise you'd have to prepend the selector with a selector of it's parent, for example

<div className="file_input-container">
  <FileBase ... />
</div>

css:

.file_input-container input[type=file] {
  ...
}

Answer 2

If someone interested I found how style this ugly button.

For example if you have your code like this :

<div className="input-file">
          <FileBase
            type="file"
            multiple={false}
            onDone={({base64}) => setPostData({ ...postData, selectedFile: base64 })}
          />
</div>

In your css you can select it with this selector (it works with Chrome, but I haven't test it with another browser)

.input-file input[type="file" i]::-webkit-file-upload-button{
    ... *your style*
}

And boom !!