Summary

I’m trying to update the popover component styles in my Mantine project so that the z-index is 1 instead of 300, but I can’t seem to make it work. The backgroundColor style works correctly, so it appears that the component is being accessed. Here is my code:

import "@mantine/core/styles.css";
import { createTheme, MantineProvider, Popover } from "@mantine/core";
import PageRouter from "./PageRouter";

function App() {
    return (
        <MantineProvider theme={customTheme}>
            <PageRouter />
        </MantineProvider>
    );
}

export default App;

const customTheme = createTheme({
    fontFamily: "Nunito Sans, sans-serif",
    components: {
        Popover: Popover.extend({
            styles: {
                dropdown: {
                    zIndex: 1,
                    backgroundColor: "red",
                },
            },
        }),
    },
});