Question

195

React-dropzone style drop area

rated 0 times [ 200] [ 5] / answers: 1 / hits: 22638 / 7 Years ago, mon, march 20, 2017, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tylor

Add To Favorites

Follow

Total Points: 334

Total Questions: 100

Total Answers: 111

Location: Marshall Islands

Member since Mon, May 31, 2021

3 Years ago

answered 7 Years ago zackeryzainv · Accepted Answer

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.