Dropzone not working when custom style using styled-components

Do you want to request a feature or report a bug?

• I found a bug
• I want to propose a feature

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

const DropzoneStyled = styled(Dropzone) background: ‘#f8f8f8’, border: ‘5px dashed #ddd’, width: ‘100%’, height: ‘50px’, textAlign: ‘center’, paddingTop: ‘25px’ ;

[alexcroox]

This works for me

import React from 'react'
import Dropzone from 'react-dropzone'
import styled, { css } from 'styled-components'

const DropZone = (props) => (
  <Dropzone onDrop={props.onDrop} style={{}}>
    {({ isDragActive, isDragAccept, isDragReject, acceptedFiles, rejectedFiles }) => (
      <DropZoneContainer isDragActive={isDragActive} isDragReject={isDragReject}>
        Drop files here
      </DropZoneContainer>
    )}
  </Dropzone>
)

const DropZoneContainer = styled.div`
  height: 400px;
  border: 2px dashed #2c67d8;
  padding: 30px;

  ${props => (props.isDragActive) && css`
    border-color: green;
  `}
`

export default DropZone

The key was style={{}} on the Dropzone element to stop it from applying it’s own default styles outside of my DropZoneContainer

[okonet]

Although I recognize this is as a bug, I can’t accept not properly filled issues due to the lack of time. Please provide with a reproducible example or code and fill out the rest of the template and I’ll reopen it.