Description
openedon Sep 5, 2022
What you were expecting:
Adding a className prop to the AppBar should add the provided class to the actual DOM element.
What happened instead:
The provided class is not present in the root DOM element of AppBar. Consequently, the styled mui utility cannot be used with the default AppBar since the injected className prop is ignored.
Related code:
In the example below I create a StyledAppBar with the styled utility and use it in place of AppBar. The color of the AppBar should be black. Also, inspecting the DOM reveals that no class related to my styling is added to the root DOM element (<header>) of the AppBar.
https://codesandbox.io/s/dazzling-thunder-hdd1ed
// part of the code in sandbox
const MyAppBar = memo((props) => (
<StyledAppBar {...props} userMenu={<MyUserMenu />} />
));
const StyledAppBar = styled(AppBar, { name: "MyAppBar" })({ // a class containing 'MyAppBar' string should appear in the root element of AppBar
backgroundColor: "black !important"
});Other information:
Inspecting the GitHub repo, I see that AppBar internally uses a wrapper container. That container is the root react element of the AppBar component and the one that receives the className prop (<Container className={className}>).
The container component though defaults to HideOnScroll, which, in turn, ignores and does not pass down the className property to its children elements
// HideOnScroll implementation
export const HideOnScroll = (props: HideOnScrollProps) => {
const { children } = props;
const trigger = useScrollTrigger();
return (
<Slide appear={false} direction="down" in={!trigger}> // no className used or passed down
{children}
</Slide>
);
};So the AppBar default implementation renders a <HideOnScrollclassName={props.className}> which ignores the provided className altogether.
Environment
- React-admin version: 4.3.1
- React version: 18
- Browser: Brave Version 1.43.89 Chromium: 105.0.5195.102 (Official Build) (64-bit)
Activity