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

有更多涉及庫的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>