[Bug?]: Mantine setup yarn rw setup ui mantine is not updated to work with Mantine V7

[bnn1]

What's not working?

Mantine migrated to using css in v7 and is now requires additional setup, i.e. inclusion of mantine css file and postcss config.

Related #9261

How do we reproduce the bug?

1. In a RW project setup Mantine yarn rw setup ui mantine
2. In any page/component import and use a mantine component
3. See that the component is unstyled

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

[ravenberg]

I also noticed that the styling is not loading properly when e.g. applying variant to a button as such (even with global css import)

<Button variant="outline">Submit</Button>

Mantine's maintainer also has his template set to redwood 5.x https://github.com/mantinedev/redwood-template. Perhaps there are some issues going on with Mantine and Redwood 6?

[bnn1]

@ravenberg just tested it, variants and all other features do work with imported css file. Make sure you import the correct file

// web/src/App.tsx
import '@mantine/core/styles.css'

If it is still not working for you, could you please provide step by step setup?

[jtoar]

Hey @bnn1, thanks for reporitng—happy to accept a PR for this!

[ravenberg]

@bnn1 As I was setting up a repro to reproduce, I cannot reproduce it anymore! Guess this is good news!

[beardo01]

Setup a new project tonight and I needed to include the following as @bnn1 suggested:

// web/src/App.tsx
import '@mantine/core/styles.css'

In addition, I was creating a Typescript project so needed to update the generated config file to return the correct theme type. I actually ended up putting it all in App.tsx:

import { MantineProvider, createTheme } from '@mantine/core'

import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'

import FatalErrorPage from 'src/pages/FatalErrorPage'
import Routes from 'src/Routes'

import './index.css'
import '@mantine/core/styles.css'

// Mantine theme
const theme = createTheme({})

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <MantineProvider theme={theme}>
        <RedwoodApolloProvider>
          <Routes />
        </RedwoodApolloProvider>
      </MantineProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>
)

export default App

❯ yarn rw --version  
6.3.2

[Tobbe]

This was fixed by #9388

[Tobbe]

Please open a new issue if Mantine still doesn't work 🙏