React-dropzone风格拖放区域

Question

我是

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>

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

谢谢！

Answer 1

你所做的一切都很好。如果您愿意，可以在添加到项目中的 .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;
}

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

Answer 2

您可以创建这样的样式对象

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>

Answer 3

常规的反应样式对我来说不起作用。由于某种原因，我必须以特殊的方式做到这一点：

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

您必须将

className

放入

getRootProps

通话中。

然后在 css 文件中定义一个

dropzone

类。例如，这是我的：

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

我最初确定是从其他地方复制了 Dropzone 代码，但我不记得从哪里得到它。