Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

It doesn't work with styled components #317

Open
pedrokohler opened this issue Jul 31, 2021 · 1 comment
Open

It doesn't work with styled components #317

pedrokohler opened this issue Jul 31, 2021 · 1 comment

Comments

@pedrokohler
Copy link

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

  • OS: Ubuntu
  • Browser: Chrome
  • @material-ui/core version: 4.11.4
  • material-ui-dropzone version: 3.5.0
  • styled-components version: 5.3.0
@pedrokohler pedrokohler changed the title oesn't work with styled components It doesn't work with styled components Jul 31, 2021
@vikash-del
Copy link

vikash-del commented Aug 30, 2021

Use dropzoneClass prop to apply your styles.
Example:

This works fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants