How to style <input/> field in React

We've all needed to upload files to our apps, and if you are not using react-dropzone, most likely, you're stuck with the following:

Generated by:

<input type="file" onChange={()=>doSomething}/>

To solve the issue, and add a modern look and feel to the button we will add the <label> tag above it:

<label htmlFor={'upload-button'}>
    <div className={classes.chooseFile}>
        <SomeIconElement style={{marginRight: 10}}/> Upload File
    </div>
</label>

notice that we have added htmlFor property to the <label> tag, the contents of which we will now add to the <input> element with property id such that browser knows what the label is for:

<input type="file" id="upload-button" style={{display: 'none'}}
       onChange={handleChange}/>

Two things stand out in this element — first, we have a matching id property as we do on the label htmlFor element; second, we added inline style to hide this button.

The final result for me looked like this:

slightly cooler-looking button

Ps. The CSS for the styled button that centers the icon and the text:

chooseFile:{
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
    width: '20vw',
    padding: 5,
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: 'green',
    borderRadius: 5,
    color: 'green',
}