Example of how to use the theme overrides

[amirmishani]

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

[max-carroll]

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]

@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]

@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]

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?

[max-carroll]

this might help https://medium.com/javascript-in-plain-english/extend-material-ui-theme-in-typescript-a462e207131f

[amirmishani]

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]

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

[panz3r]

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]

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

[wejrox]

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.