Material-ui: [theme] custom theme not working

[sairamdevarashetty]

I tried to add the background color for the button it's not working in the https://material-ui-1dab0.firebaseapp.com/ (version 4.5.0)

const theme = createMuiTheme(
    {
        "direction": "ltr",
        "palette": {
            "type": "light",
            "button":{
                color:"#ef9a9a"     
            },
                        "background": {
                           "button":"#2196f3",
               "input":"#e0e0e0",
            },
               },
     } 

[oliviertassinari]

You need to use the createPalette() helper. Have a look at the demos of /customization/themes regarding correctly implementing it. Let us know if you find any bug.

[sairamdevarashetty]

@oliviertassinari I tried with that too

const theme = createMuiTheme({
    palette: createPalette({
        type: 'dark', // Switching the dark mode on is a single property value change.
        primary: green
    }),
});

it's still not workng

[oliviertassinari]

Did you copy paste the example? What's the error?

[sairamdevarashetty]

@oliviertassinari No error is being showed . Also Why there is three colors available for color using palatte (primary , accent , error) where as current version has multiple color variables.

[sairamdevarashetty]

Thanks Fixed my issue, there were two MuiThemeProvider.

[hassanbazzi]

This is somewhat related to this, but can I do this?

const theme = createMuiTheme({
  palette: createPalette({
    type: 'light',
    primary: pink,
    accent: grey,
    error: red,
    success: green,
    inProgress: yellow
  })
})

Then pass that as my theme down my context.

Then, I want to be able to use that when color props are available.

e.g.:

<Typography color="success">I love Material UI</Typography>

I try to do the above and I get:

Warning: Failed prop type: Invalid prop `color` of value `error` supplied to `Typography`, expected one of ["inherit","secondary","accent","default"].

[oliviertassinari]

@hassanbazzi No, you can not do that. There is no magic here to make it work.

[widdde]

I don't get MuiThemeProvider to work at all, I only get the default theme.
Is createPalette still needed? The documentation that you link to have no createPalette in the source code.
I have tried both:
const theme = createMuiTheme({ palette: createPalette({ type: 'dark', // Switching the dark mode on is a single property value change. background: { "default": "#000000" } }), });

and
const theme = createMuiTheme({ palette: { type: 'dark', // Switching the dark mode on is a single property value change. background: { "default": "#000000" } }, });

const Application = () => (
< MuiThemeProvider theme={theme} >
< App / >
< /MuiThemeProvider >
);
const div = document.getElementById("root")!;
ReactModal.setAppElement(div);
ReactDOM.render((), div);`

I do not get any dark theme.

I am using v1.0.0-beta.25

[iamhosseindhv]

After spending hours, this solved the problem for me:
replace
import { MuiThemeProvider } from 'material-ui/styles';
with:
import { MuiThemeProvider } from '@material-ui/core/styles';

[MarcelRobitaille]

Still not working for me.

[bringreaner]

I am also unable to use my custom theme. On inspect my custom palette is there (both with and without "create palette"), but nothing is changing.

Edit -- in other words, it looks like it's not being passed down properly, even though it's at the root of the project.

import React, { Component } from 'react'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import App from './App'

export default class AppProvider extends Component {

  render() {
    const theme = createMuiTheme({
        palette: {
           //.............
    })

    return (
        <MuiThemeProvider theme={theme}>
          <App />
        </MuiThemeProvider>
    )
  }
}

[mbrookes]

@bringreaner Your code sample looks fine. Could you provide a codesandbox where this isn't working as expected?

[iamhosseindhv]

I'm not sure if this is a solution but here's the code I usually use in my projects. Hope it helps:

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

const theme = createMuiTheme({
     palette: createPalette({
          primary: {
                // ...
          },
          secondary: {
                // ...
          },
    }),
});

[bringreaner]

Hello,

Sorry for the delay. My first time using Sandbox so I hope it works alright. You can see the code I posted earlier in the Root.js that includes a palette. Also whether or not I use createPalette, it doesn't work. (The themed palette should be brown and beige).

https://codesandbox.io/s/r0opl89jmp

[iamhosseindhv]

Your components do not receive the theme prop. In order for them to receive theme, you should export the component like this:
(I recommend setting theme type to dark so the effect is obvious)

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

const theme = createMuiTheme({
    palette: {
        type: 'dark',
    },
});

class App extends Component {
//...
}

export default withStyles({ withTheme: true })(App);

Or if you're using CSS in JS:

const styles = theme => ({
//...
});

export default withStyles(styles, { withTheme: true })(App);

SandBox: https://codesandbox.io/s/13m5vjl2zj

[bringreaner]

I came across withStyles in my research but from what I understood it was to help with styling non-Material-UI components with your same theme, while MuiThemeProvider was supposed to make your theme accessible down the React tree, so that you didn't have to expressly import it into every component. Perhaps I'm wrong though.

I appreciate the help.

[mbrookes]

@bringreaner It seems to be working fine - the problem is that you primary.main is so dark, it almost looks black, and secondary.main is so light it's almost white.

Try this: https://codesandbox.io/s/7m7n48rk60

For simplicity, you can also let createMuiTheme() calculate the light, dark and contrastText values from your main colors (unless you specifically want to customise them).

[bringreaner]

Thank you for clarifying that. Hmm, I guess then it's not quite as customizable as I hoped and I misunderstood the themes. I thought if I passed it down, I could then call on any of them (primary.main, secondary.dark) as I wished to invoke the colors (like I want to have the navbar have a background of primary.main, text color of secondary.main, and indicator color of primary.light). It seems there is no way to efficiently do that, and just writing a CSS file or writing inline CSS is faster / more efficient. I tried the withTheme way too and it works but it seems like a lot of code when just using a const tabsTheme={}...and then inline calling it with styles={tabsTheme} would be faster and easier to edit.

As a beginner it's hard to be sure I'm correct, though.

[mbrookes]

@bringreaner Unfortunately not. Your best bet would be to set your colors, bearing in mind that you can have custom keys in there too (primary.mine, secondary. yours), then apply them using the className / classes APIs, wrapped components, theme overrides etc as makes sense for how widely the customisation is needed.

[bringreaner]

That's too bad, it'd be so nice to have that. Thank you for all of the help!

[garri-dev]

After spending hours, this solved the problem for me:
replace
import { MuiThemeProvider } from 'material-ui/styles';
with:
import { MuiThemeProvider } from '@material-ui/core/styles';

the same for me....

[mbrookes]

@garridev What's the context here? Are you upgrading a MUI v0 app, or do we have a glitch in the documentation somewhere?

Also, with the release of the @material-ui/styles package, it will be:

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

[rdsedmundo]

@mbrookes Should I use both ThemeProvider and also MuiThemeProvider from @material-ui/core? The documentation around theming/styling is very misleading. One place is using one solution, the other, another.

[oliviertassinari]

@rdsedmundo It will be clearer once we release v4.

[yfenggo]

After spending hours, this solved the problem for me:
replace
import { MuiThemeProvider } from 'material-ui/styles';
with:
import { MuiThemeProvider } from '@material-ui/core/styles';

mine is replacing
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
with
import { MuiThemeProvider } from '@material-ui/core/styles';

The old import is what I copied from some outdated websites.

Lesson learnt after few hours wasted to solve this issue is that we should always refer to official documentation: https://material-ui.com/customization/themes/

[vkuba]

I think I've figured this out. To use them & theme provider you need to import:
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
Then declare your template:

    const theme = createMuiTheme({
      typography: {
        useNextVariants: true
      },
      palette: {
        primary: {
          light: "#A6C539",
          main: "#A6C539",
          dark: "#A6C539",
          contrastText: "#A6C539"
        },
        secondary: {
          light: "#A6C539",
          main: "#A6C539",
          dark: "#A6C539",
          contrastText: "#A6C539"
        }
      }
    });

After that you should be able to provide it to your App:

<MuiThemeProvider theme={theme}>

To use injected theme you need to create theme with theme argument:

const styles = function(theme: Theme) {...}

The most important part is about import namespaces:
You should use import { createStyles, withStyles } from "@material-ui/core"; instead of import { createStyles, withStyles } from "@material-ui/styles";

It is really confusing and I don't see any reason of keeping obsolete modules.