How can I add Theme?

[linkjane]

Our project has material ui, and when I use title: <Typography>hello</Typography>, user interface will override by default Tpyography theme, which inject later, so I think the Swal is independent system, so I need add Theme to the component Typography. So can I add Theme in the Swal root?

[zenflow]

Hi @uncle-link. Sorry this issue seems to have slipped by unnoticed.

So, tell me if I understand. You need your React element to be rendered within a <ThemeProvider theme={theme}> element, to provide your custom theme instead of the default theme? (Luckily I am familiar with Material UI)

If so, there are two options:

1. Simply wrap your React element in a <ThemeProvider theme={theme}> element before calling Swal.fire with it:

Swal.fire({
  title: (
    <ThemeProvider theme={theme}>
      <Typography>Hello</Typography>
    </ThemeProvider>
  )
})

2. Make a PR to this repo adding a new SwalReactContext option which could be used like so:

const SwalReactContext = ({ children }) => (
  <ThemeProvider theme={theme}>
    {children}
  </ThemeProvider>
)
const MySwal = Swal.mixin({ SwalReactContext })
MySwal.fire({
  title: <Typography>Hello</Typography>
})

Option # 2 would be a bit more work, but would make things more simple and less repetitive. Not just for you but also for other developers in the same situation. And not just when providing Material UI theme context, but also when providing any kind of context. The choice is yours. :)

Please let me know if/how you've resolved this.

If I didn't understand correctly, please clarify for me. Thanks!

[linkjane]

Thank you help me, but it seems not working First, mixin options shows that it has no parameter SwalReactContext Second, the log did not execute at all

[zenflow]

First, mixin options shows that it has no parameter SwalReactContext

@uncle-link That is correct. There is currently no SwalReactContext parameter. Option # 2, like I said, is "Make a PR to this repo adding a new SwalReactContext option [...]"

Probably you want to go with option # 1 (refer to my comment above), which is the only way to accomplish what you want with this library as-is.