Modal is transparent | Mantine | Page 1

bronze anvil Nov 8, 2024, 1:43 AM

#

What could could be the reason why my mantine modal is transparent

inland plover Nov 8, 2024, 5:04 AM

#

You might have ssome styles in your application that do that

bronze anvil Nov 8, 2024, 5:54 AM

#

This is my :

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 👇 Make sure the styles are applied in the correct order */
@layer mantine, mantine-datatable;

@layer utilities {
  .bg-primary {
    @apply bg-brand-600;
  }
  .text-primary {
    @apply text-brand-600;
  }
  .border-primary {
    @apply border-brand-600;
  }
}

/* For light mode */
:root[data-mantine-color-scheme="light"] {
  --mantine-color-body: var(--mantine-color-primary-0) !important;
}

/* For dark mode */
:root[data-mantine-color-scheme="dark"] {
  --mantine-color-body: #282827 !important;
}

#

does the modal have style to change the bg?

bronze anvil Nov 8, 2024, 5:56 AM

#

inland plover You might have ssome styles in your application that do that

/* For light mode */
:root[data-mantine-color-scheme="light"] {
--mantine-color-body: var(--mantine-color-primary-0) !important;
}

/* For dark mode */
:root[data-mantine-color-scheme="dark"] {
--mantine-color-body: #282827 !important;
}

When I disable this both the background color of modal will now work

#Modal is transparent