Ymir Comments - Answer Overflow

Ymir

•Created by sumit on 4/22/2023 in #🔰newbie

help w/ mantine notifications

The notifications/styles.css file looks like this:

.m_b37d9ac7 {
  width: calc(100% - var(--mantine-spacing-md) * 2);
  position: fixed;
  z-index: var(--notifications-z-index);
  top: var(--notifications-top);
  left: var(--notifications-left);
  right: var(--notifications-right);
  bottom: var(--notifications-bottom);
  transform: var(--notifications-transform);
  max-width: var(--notifications-container-width);
}

.m_5ed0edd0 + .m_5ed0edd0 {
    margin-top: var(--mantine-spacing-md);
  }

.m_b37d9ac7 {
  width: calc(100% - var(--mantine-spacing-md) * 2);
  position: fixed;
  z-index: var(--notifications-z-index);
  top: var(--notifications-top);
  left: var(--notifications-left);
  right: var(--notifications-right);
  bottom: var(--notifications-bottom);
  transform: var(--notifications-transform);
  max-width: var(--notifications-container-width);
}

.m_5ed0edd0 + .m_5ed0edd0 {
    margin-top: var(--mantine-spacing-md);
  }

So wouldn't guess there was a need for a overwrite or anything. I can make a reproducible minimal repo if someone wants to make a go at getting it working!

43 replies

PD🧩 Plasmo Developers

•Created by sumit on 4/22/2023 in #🔰newbie

help w/ mantine notifications

Want to bump this up, as I have a similar issue - and curious if someone has found a fix. I have a wrapper around my content script that looks like this:

import { createTheme, MantineProvider, Notification } from "@mantine/core"
import React, { useEffect } from "react"
//see https://github.com/PlasmoHQ/plasmo/issues/776#issuecomment-1811072653
// style imports
import "@mantine/core/styles.css"
import "@mantine/notifications/styles.css"
import "~0lib/styles/mantine-override.css"
// @ts-ignore
import mantineCssText from "data-text:@mantine/core/styles.css"
// @ts-ignore
import mantineNotificationsCssText from "data-text:@mantine/notifications/styles.css"
// @ts-ignore
import mantineOverrideCssText from "data-text:~/0lib/styles/mantine-override.css"
import type { PlasmoGetStyle } from "plasmo"

const theme = createTheme({})

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.id = "styles-global"
  style.textContent =
    mantineCssText + mantineNotificationsCssText + mantineOverrideCssText
  return style
}

export function EntrypointWrapper({ children }: { children: React.ReactNode }) {
  return (
    <MantineProvider theme={theme} cssVariablesSelector=":host">
      {children}
      <Notification />
    </MantineProvider>
  )
}

import { createTheme, MantineProvider, Notification } from "@mantine/core"
import React, { useEffect } from "react"
//see https://github.com/PlasmoHQ/plasmo/issues/776#issuecomment-1811072653
// style imports
import "@mantine/core/styles.css"
import "@mantine/notifications/styles.css"
import "~0lib/styles/mantine-override.css"
// @ts-ignore
import mantineCssText from "data-text:@mantine/core/styles.css"
// @ts-ignore
import mantineNotificationsCssText from "data-text:@mantine/notifications/styles.css"
// @ts-ignore
import mantineOverrideCssText from "data-text:~/0lib/styles/mantine-override.css"
import type { PlasmoGetStyle } from "plasmo"

const theme = createTheme({})

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.id = "styles-global"
  style.textContent =
    mantineCssText + mantineNotificationsCssText + mantineOverrideCssText
  return style
}

export function EntrypointWrapper({ children }: { children: React.ReactNode }) {
  return (
    <MantineProvider theme={theme} cssVariablesSelector=":host">
      {children}
      <Notification />
    </MantineProvider>
  )
}

In my content script I have the equivalent of:

<Button onClick={() => notifications.show({message: 'TEST'}) }>TEST</Button>

<Button onClick={() => notifications.show({message: 'TEST'}) }>TEST</Button>

The mantine styles have been working flawlessly with the method described in the example / on github. But for the notifications, not so much. I can see what I assume to be the <Notification /> component in the top left corner of my screen, but triggering notifications does nothing.

43 replies

PD🧩 Plasmo Developers

•Created by LoXatoR on 3/19/2024 in #👟framework

How to customize parcel config?

@lab with-custom-parcel example ( & mention in docs ) would be really helpful here! 🙂

15 replies

Gaming

Programming