search

Yuvaleros / material-ui-dropzone

A Material-UI file upload dropzone
MIT License
485 stars 245 forks source link

It doesn't work with styled components #317

Open pedrokohler opened 3 years ago

pedrokohler commented 3 years ago

Bug Report

Describe the bug

It doesn't work with styled components. Simply no styling takes effect. I'm guessing it's because the className property passed to the component is not properly passed to the internal components.

Steps to reproduce

Do something like the code below

import styled from 'styled-components';
import { DropzoneArea as MuiDropZone } from 'material-ui-dropzone';
export const DropZoneArea = styled(MuiDropZone)`
  height: 100px;
  &.MuiDropzoneArea-textContainer{
    color: red;
  }
`;

You'll see that none of the styles are applied.

Expected behavior

Styles should be applied when using styled components.

Versions

vikash-del commented 3 years ago

Use dropzoneClass prop to apply your styles. Example: <DropzoneArea dropzoneClass = classes.dropzone />

This works fine.