Cannot apply style to chip

[anz000]

I want to apply display: "flex" to the previewChip (.MuiChip-root).

<DropzoneArea
                                acceptedFiles={['audio/*', 'video/*']}
                                filesLimit={1}
                                maxFileSize={10*1024*1000000}
                                onChange={this.handleChange.bind(this)}
                                dropzoneText={t('Drag n Drop or Click')}
                                showPreviewsInDropzone={false}
                                showFileNames
                                showPreviews={true}
                                previewText={""}
                                useChipsForPreview={true}
                                previewChipProps={{color: 'primary', classes: {root: {display: "flex"}}}}
                                showAlerts={true}
                            />

The color: primary is applied. However, I couldn't get the display: flex classes to apply to .MuiChip-root

Probing browser yields

class="MuiChip-root [object Object] MuiChip-colorPrimary MuiChip-deletableColorPrimary MuiChip-outlined MuiChip-outlinedPrimary MuiChip-deletable"

Notice the [object Object] . Pretty sure I'm doing something wrong here. How to accomplish this. Thanks.

[panz3r]

Hi @anz000 ,

Thanks for your feedback, for what I can see you should wrap the classes definition inside a makeStyles or withStyles call (as per the material-ui docs here)

const useChipStyles = makeStyles({
  root: {
    display: 'flex',
  },
});

const YourComponent = () => {
  const chipStyles = useChipStyles();

  return (
    <DropzoneArea
      acceptedFiles={['audio/*', 'video/*']}
      filesLimit={1}
      maxFileSize={10 * 1024 * 1000000}
      onChange={this.handleChange.bind(this)}
      dropzoneText={t('Drag n Drop or Click')}
      showPreviewsInDropzone={false}
      showFileNames
      showPreviews={true}
      previewText={''}
      useChipsForPreview={true}
      previewChipProps={{
        color: 'primary',
        classes: {
          root: chipStyles.root,
        },
      }}
      showAlerts={true}
    />
  );
};

Let me know if this helps you.

[anz000]

Used HOC to accomplish it. Thanks.

const chipStyles = {
    root: {
        display: 'flex',
    },
};
...
const {classes} = this.props;
...
<DropzoneArea
   ...
   previewChipProps={{
      color: 'primary',
      classes: {
         root: classes.root,
      },
   }}

...
export withStyles(chipStyles)(MyComponent);