React-dropzone style drop area

Question

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!

Answer 1

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.

Answer 2

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>