[英]React-dropzone style drop area
我是reactjs
,试图创建一个使用react-dropzone的组件。 我想知道,什么是覆盖拖放区域样式的默认设置的最佳方法。
到目前为止,我有inline style
,但在我看来,我没有做'正确'的事情。
<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>
任何帮助或更好的建议?
谢谢!
你在做什么都很好。 如果您愿意,可以在添加到项目中的.css文件中编写样式。 为组件提供className并将css导入项目中的某个位置。
<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;
}
有更多涉及库的css-in-js,如样式组件,但没有100%正确的解决方案。
您可以创建这样的样式对象
const dropzoneStyle = {
width : "100%",
height : "20%",
border : "1px solid black"
};
像这样在jsx中使用变量
<Dropzone
className=""
multiple={false}
onDrop={this.onDrop}
style={dropzoneStyle}
>
<div>
Try dropping some files here, or click to select files to upload.
</div>
</Dropzone>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.