Q:

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!

A:

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.

A:

You can create a style object like this 
const dropzoneStyle = {
    width  : "100%",
    height : "20%",
    border : "1px solid black"
};

Use the variable in jsx like this
<Dropzone 
  className=""
  multiple={false}
  onDrop={this.onDrop}
  style={dropzoneStyle}
>
  <div>
       Try dropping some files here, or click to select files to upload.
  </div>
</Dropzone>

