MUITheme needs to affect Login as it does for the rest of the Application

[zifnab87]

Is your feature request related to a problem? Please describe.
Adding a Mui theme on <Admin> using theme={customTheme} doesn't affect Login

Describe the solution you'd like
Adding a MUI theme like that would affect Login as it does with the rest of the Application:

const customTheme = createMuiTheme({
    palette: {
        primary: {
            light: '#ffcc00',
            main: '#ff9900',
            dark: "#cc6600",
            contrastText: '#ffffff',
        },
        secondary: {
            light: '#ffcc00',
            main: '#ff9900',
            dark: "#cc6600",
            contrastText: '#ffffff',
        },
    },
});

<Admin
        theme={customTheme} [...] >
     [....]
</Admin>

Something that looks like:

Describe alternatives you've considered
Using withStyles feels hacky and it is difficult to change error color, labels when inputs are on focus etc

import React from 'react';
import { Login, LoginForm } from 'react-admin';
import { withStyles } from '@material-ui/core';
import customTheme from '../theme';

const styles = ({
    main: { background: '#333' },
    avatar: {
        background: 'url(//cdn.example.com/background.jpg)',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'contain',
        height: 80,
    },
    icon: { display: 'none' },
});

const CustomLoginForm = withStyles({
    button: { 
        background: customTheme.palette.primary.light, 
        '&:hover': { background: customTheme.palette.primary.main } 
    },
})(LoginForm);

const CustomLoginPage = props => (
    <Login
        loginForm={<CustomLoginForm theme={customTheme}/>}
        {...props}
    />
);

export default withStyles(styles)(CustomLoginPage);

<Admin
        loginPage={CustomLoginPage} [...] > 
    [...] 
</Admin>

[trsteel88]

Is there a solution to bring the theme through that is defined in app.js?

I tried using what's in the demo (https://github.com/marmelab/react-admin/blob/master/examples/demo/src/Login.js) but it doesn't match my app theme.

[Kmaschta]

Fixed by #2591

[trsteel88]

If I don't set a theme, the login page still comes through as pink (and the logged in areas with a blue header).

Am I missing something?

[fzaninotto]

@trsteel88 The new default login page does support theming in react-admin 2.5. If you created your own Login page, you should decorate it with MuiThemeProvider. I'll update the Authentication docs accordingly.

[trsteel88]

Thanks. Works with the new docs