#How to add backgroundImage to <AppShell>

9 messages · Page 1 of 1 (latest)

haughty plover
#

the second approach, I tried to add a custom style directly to the <AppShell>

# 
import { useState } from 'react';
import {
  AppShell,
  Navbar,
  Header,
  Text,
  MediaQuery,
  Burger,
  useMantineTheme,
} from '@mantine/core';

import { BsCheck2All } from "react-icons/bs";

export default function AppContainer() {
  const theme = useMantineTheme();
  const [opened, setOpened] = useState(false);
  return (
    <AppShell
      styles={{
         backgroundImage:       "url(https://media.discordapp.net/attachments/1119244481808576543/1119244483536629840/image.png)"
      }}
      navbarOffsetBreakpoint="sm"
      asideOffsetBreakpoint="sm"
      navbar={
        <Navbar p="md" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }} bg="blue-gray.8">
          <Text>Application navbar</Text>
        </Navbar>
      }
      header={
        <Header height={{ base: 50, md: 120 }} p="md" bg="blue-gray.7">
          <div style={{ display: 'flex', alignItems: 'center', height: '100%', gap: '16px' }}>
            <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
              <Burger
                opened={opened}
                onClick={() => setOpened((o) => !o)}
                size="sm"
                color={theme.colors.gray[6]}
                mr="xl"
              />
            </MediaQuery>
            <BsCheck2All />
            <Text>TO DO LIST</Text>
          </div>
        </Header>
      }
    >
    </AppShell>
  );
}
#

both render blank without backgroundImage

#

this is the backgroundImage

#

How to add backgroundImage to <AppShell>

haughty plover
#

the third approach, style API

import { useState } from 'react';
import {
  AppShell,
  Navbar,
  Header,
  Text,
  MediaQuery,
  Burger,
  useMantineTheme,
  createStyles
} from '@mantine/core';

import { BsCheck2All } from "react-icons/bs";

const useStyles = createStyles((theme) => ({
  root: {
    backgroundImage: "url(https://media.discordapp.net/attachments/1119244481808576543/1119244483536629840/image.png)"
  }
}))

export default function AppContainer() {
  const { classes } = useStyles();
  const theme = useMantineTheme();
  const [opened, setOpened] = useState(false);
  return (
    <AppShell
      classNames={{
        root: classes.root
      }}
      navbarOffsetBreakpoint="sm"
      asideOffsetBreakpoint="sm"
      navbar={
        <Navbar p="md" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }} bg="blue-gray.8">
          <Text>Application navbar</Text>
        </Navbar>
      }
      header={
        <Header height={{ base: 50, md: 120 }} p="md" bg="blue-gray.7">
          <div style={{ display: 'flex', alignItems: 'center', height: '100%', gap: '16px' }}>
            <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
              <Burger
                opened={opened}
                onClick={() => setOpened((o) => !o)}
                size="sm"
                color={theme.colors.gray[6]}
                mr="xl"
              />
            </MediaQuery>
            <BsCheck2All />
            <Text>TO DO LIST</Text>
          </div>
        </Header>
      }
    >
    </AppShell>
  );
}
#

the problem is resolved using Style API

#

sorry for bothering 🙏