React-Dropzone Stil Drop-Bereich

Question

Ich bin neu in reactjs, versucht, eine Komponente zu erstellen, die react-dropzone verwendet. Ich frage mich, was ist der beste Weg, um die Standardeinstellung zu ändern, um den Drop-Bereich zu stylen.

Bisher habe ich inline style, aber es sieht für mich aus, dass ich nicht das "richtige" Ding mache.

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

Irgendwelche Hilfe oder besseren Vorschlag?

Vielen Dank!

Answer 1

Was Sie tun, ist völlig in Ordnung. Wenn Sie möchten, können Sie Ihr Styling in eine .css-Datei schreiben, die Sie Ihrem Projekt hinzufügen. Geben Sie der Komponente einen Klassennamen und importieren Sie die CSS irgendwo in Ihrem Projekt.

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

Es gibt beteiligte Bibliotheken zu tun CSS-in-js wie Stil-Komponenten, aber es gibt keine 100% richtige Lösung.

Answer 2

Sie können einen Stil-Objekt erstellen, wie diese

const dropzoneStyle = { 
    width : "100%", 
    height : "20%", 
    border : "1px solid black" 
}; 

Verwenden Sie die Variable in jsx wie diese

<Dropzone 
    className="" 
    multiple={false} 
    onDrop={this.onDrop} 
    style={dropzoneStyle} 
> 
    <div> 
     Try dropping some files here, or click to select files to upload. 
    </div> 
</Dropzone>