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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.