Реагировать - File Uploader

Question

Итак, я использовал это https://github.com/FineUploader/react-fine-uploader. Есть ли способ добавить cursor: pointer в стиль элемента FileInput.

То, что я пробовал:

     <FileInput
        uploader={this.uploader}
        className={{ cursor: 'pointer' }}
        style={{ cursor: 'pointer' }}
      >
        <span>{this.props.children}</span>
      </FileInput>

, тогда он сгенерировал:

<input type="file" class="react-fine-uploader-file-input" style="bottom: 0px; height: 100%; left: 0px; margin: 0px; opacity: 0; padding: 0px; position: absolute; right: 0px; top: 0px; width: 100%;">

без свойства cursor: pointer

Answer 1

Вы можете реализовать с помощью CSS.Вам нужно создать один CSS и предоставить для ввода файла className="file-upload".

См. Этот рабочий stackblitz demo.

CSS

.file-upload input[type='file'],::-webkit-file-upload-button {
  cursor: pointer;
}

FileInput Component

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

import FileInput from 'react-fine-uploader/file-input'
import FineUploaderTraditional from 'fine-uploader-wrappers'

const uploader = new FineUploaderTraditional({
  options: {
    request: {
      endpoint: 'my/upload/endpoint'
    }
  }
})

const fileInput = (
  <FileInput multiple accept='image/*' uploader={uploader} className="file-upload">
    <span class="fa fa-upload file-label">Choose Files</span>
  </FileInput>
)

render(fileInput,document.getElementById('root'))

Answer 2

Стиль передачи для вашего элемента span.Используйте правильное имя класса и не передавайте стили непосредственно в className.

     <FileInput uploader={this.uploader} >
        <span style={{cursor : 'pointer'}}>{this.props.children}</span>
     </FileInput>