CSS mixup with custom AppBar

[alixongmbh]

Hi
When I place a Button element on my custom AppBar, the order of the CSS is changed. This causes display problems e.g. for BooleanInput.

This was working in 2.9 but not in 3.2

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

const MyAppBar = props => (
    <AppBar {...props}>
        <Toolbar>
            <Typography variant="h6" id="react-admin-title" />
            <Button>Hi</Button>
        </Toolbar>
    </AppBar>
)

export default MyAppBar;

[sidescraper]

test this:

import React from 'react';
import { AppBar, UserMenu, MenuItemLink } from 'react-admin';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

const MyAppBar = props => (
    <AppBar {...props}>
            <Typography variant="h6" id="react-admin-title" />
            <Button>Hi</Button>
    </AppBar>
)

export default MyAppBar;

[fzaninotto]

I don't understand what you mean by "the CSS order is changed". We use JSS, so there should not be any CSS cascade errors.

I suspect the problem comes from somewhere else (e.g. multiple versions of material-ui). We can only determine that its a react-admin bug if you provide us with a link to a CodeSandbox reproducing the issue (which is what the issue template asks you to do).

[alixongmbh]

The comment from sidescraper helped me one step further.

But the solution was to erase and reinstall the complete react-admin environment.

Thanks a lot for the responses.