Я новичок в reactjs, пытаясь создать компонент, который использует response-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>

Любая помощь или лучшее предложение?

Спасибо!

5
mikey 20 Мар 2017 в 08:16

2 ответа

Лучший ответ

То, что вы делаете, совершенно нормально. Если вы предпочитаете, вы можете написать свой стиль в файле .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, например, styled-components, но не существует 100% правильного решения.

14
brookemitchell 20 Мар 2017 в 05:58

Вы можете создать объект стиля, подобный этому

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>
4
Dhiraj 20 Мар 2017 в 05:59