CODEWITHSUNDEEP
javascriptcssreactjsdropzone.js
mikey
mikey

Reputation: 1460

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!

Upvotes: 10

Views: 25897

Answers (3)

shieldgenerator7
shieldgenerator7

Reputation: 1736

Regular react styling didnt work for me. I had to do it a special way for some reason:

<Dropzone
    onDrop={this.onDrop}
>
    {({ getRootProps, getInputProps }) => (
        <div {...getRootProps({ className: "dropzone" })}>
            <input {...getInputProps()} />
            <p>Drop files here</p>
        </div>
    )}
</Dropzone>

You have to put the className in the getRootProps call.

Then define a dropzone class in your css file. Here's mine, for example:

.dropzone {
    border: 1px solid black;
    background-color: #8f8e7f;
}

I copied the Dropzone code from somewhere else originally I'm sure, but I don't remember where I got it from.

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 33618

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>

Upvotes: 6

brookemitchell
brookemitchell

Reputation: 819

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.

Upvotes: 17

Related Questions