Yuvaleros/material-ui-dropzone

Example of how to use the theme overrides

amirmishani opened this issue · 10 comments

amirmishani commented

How do you do use the Mui theme overrides? Can you please provide an example? Thank you.

max-carroll commented

For overriding the themes in a general sense this is how I do it, I have a js file called muiTheme.js

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  // so that you can later reference the defaults in other overrides
});

theme.overrides.MuiTypography = {
  h1: {
    color: theme.palette.secondary.main,
    fontFamily: "'Roboto', sans-serif",
    fontSize: 50,
    fontWeight: 700,
    marginBottom: theme.spacing(6)

  },
}

theme.overrides.MuiDialogTitle = {
  root:{ 
    ...theme.overrides.MuiTypography.h2,
    color: theme.palette.secondary.dark,
    fontWeight: 900
  
  }
}


theme.overrides.MuiFab = {
  root: {
    boxShadow: 'none'
  },
  primary: {
    color: 'white'
  }
}


export default theme;

this is then passed into your app, perhaps in the app.js if you app looks like this

import React from 'react'
import { MuiThemeProvider } from '@material-ui/core'
import theme from './muiTheme' // heres your file! 😀


export default function App() {

  return (
    <MuiThemeProvider theme={theme}>
    
        <Rest>
          <Of>
            <Your>
              <Site>

              </Site>
            </Your>
          </Of>
        </Rest>
    </MuiThemeProvider>
  )
}

and then in your muiTheme file you see how I have overriden some in the code snippet above, you should be able to customize some of the classes like this

theme.overrieds.MuiDropzoneArea = {
   root: {
      backgroundColor: 'red'
  }
}

Again this is just my guess based on a few assumptions, I haven't actually tried this myself with material-ui-dropzone yet, but If I was going to try customising them via the themehow I would start

amirmishani commented

@max-carroll the theme.overrides.MuiDropzoneArea doesn't work for me I'm using typescript and it's telling me MuiDropzoneArea is not assignable to type 'Overrides'.

max-carroll commented

@max-carroll the theme.overrides.MuiDropzoneArea doesn't work for me I'm using typescript and it's telling me MuiDropzoneArea is not assignable to type 'Overrides'.

Oh right, I'm not sure in that case, hopefully someone else can help you with this

max-carroll commented

If overriding the theme in Mui doesn't work you could try to pass in classes into the Dropzone like

<Dropzone 
   classes={{ root: classes.root, textContainer: classes.container}}

there is a theming.md in the source code you can look at with a list of classes you can use
This is unless anyone else knows how to extend the mui Theme with these additional components?

  • 🎉1
amirmishani commented

If overriding the theme in Mui doesn't work you could try to pass in classes into the Dropzone like

<Dropzone 
   classes={{ root: classes.root, textContainer: classes.container}}

There seems to be no classes property on Dropzone. I get the following error:

Property 'classes' does not exist on type 'IntrinsicAttributes & DropzoneAreaProps & { children?: ReactNode; }'.

max-carroll commented

Oh right, perhaps we need to look into that then, at the moment I know the classes prop is being fed in from a higher order component, we would need to ensure that if classes are passes in as a prop that these take president. As a work around until this has been done you could make use of the classes props as indicated here

image

panz3r commented

Hi @amirmishani ,

Thanks for your feedback, the actual error was the missing typing for the classes prop in the index.d.ts file.
I just pushed a fix for that into master.

lucafaggianelli commented

This issue is not yet fixed for TypeScript, that is, I can't reference theme.overrides.MuiDropzoneArea

wejrox commented

This issue is not yet fixed for TypeScript, that is, I can't reference theme.overrides.MuiDropzoneArea

This is because MUI doesn't know about the existence of MuiDropzoneArea so it can't provide typing information. See #260 for a method to extend the types.

  • 👍2