javascript - React-dropzone 样式拖放区

Question

我是 reactjs 的新手， 试图创建一个使用 react-dropzone 的组件. 我想知道，覆盖默认设置以设置拖放区域样式的最佳方法是什么。

到目前为止，我有内联样式，但在我看来我没有做“正确”的事情。

<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>

有什么帮助或更好的建议吗？

谢谢!

Answer 1

你所做的一切都很好。如果您愿意，可以在添加到元素的 .css 文件中编写样式。为组件指定一个类名，然后将 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;
}

像 styled-components 这样的 css-in-js 涉及的库比较多，但没有 100% 正确的解决方案。