[英]React-dropzone style drop area
I am new to reactjs
, trying to create a component that uses react-dropzone . 我是
reactjs
,试图创建一个使用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. 到目前为止,我有
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>
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.
如果您愿意,可以在添加到项目中的.css文件中编写样式。 Give the component a className and import the css somewhere in your project.
为组件提供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;
}
There are more involved libraries to do css-in-js like styled-components, but there is no 100% correct solution. 有更多涉及库的css-in-js,如样式组件,但没有100%正确的解决方案。
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 像这样在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.