React-dropzone style drop area

I am new to reactjs, trying to create a component that uses react-dropzone. I was wondering, what is the best way to override the default setting to style the drop area.

So far I have inline style, but it looks to me that I am not doing the 'right' thing.

<Row>
    <Jumbotron className="text-center">
        <h4>Create a manual call</h4>
        <Dropzone 
            className=""
            multiple={false}
            onDrop={this.onDrop}
            style={{"width" : "100%", "height" : "20%", "border" : "1px solid black"}}>
                <div>
                    Try dropping some files here, or click to select files to upload.
                </div>
        </Dropzone>
    </Jumbotron>
</Row>

Any help or better suggestion?

Thank you!

What you are doing is totally fine. If you would prefer you can write your styling in a .css file that you add to your project. Give the component a className and import the css somewhere in your project.

<Dropzone
  className="dropzone"
  multiple={false}
  onDrop={this.onDrop}>
  <div>
    Try dropping some files here, or click to select files to upload.
  </div>
</Dropzone>

/* styles.css */
.dropzone {
  width : 100%;
  height : 20%;
  border : 1px solid black;
}

There are more involved libraries to do css-in-js like styled-components, but there is no 100% correct solution.