Possible to use Styled Components with Mantine?

[BradNut]

Is it possible to use Styled Components with Mantine and have no issue?

I have been trying to convert my NextJS project with Styled Components to use Mantine but I see errors like the following sometimes:

Warning: Prop `aria-controls` did not match. Server: "mantine-lllbrc1fs" Client: "mantine-6hkcu6niu"
    at button
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19450)
    at div
    at Np (webpack-internal:///./node_modules/@mantine/core/lib/index.umd.js:5:82195)

I understand JSS is the preferred way as that is what Mantine is using to style components but personally I have never liked the React style property syntax where CSS values are wrapped in commas.

If this is not something supported and these issues will persist then it seems you go all in on JSS and Mantine or do not adopt Mantine as a component library. Please let me know! Thank you.

[rtivital]

Hi @BradNut, this issue is not related to styled components, Mantine uses random id generation to connect labels with associated controls. Each component that does it accepts id prop (or similar) to assign static id instead of random one. For example – https://mantine.dev/core/text-input/#server-side-rendering

[rtivital]

Can you please inspect which component produces this error?

[BradNut]

When I put a breakpoint in the index.umd.js and refresh it shows an id of profile-drawer which corresponds to the id in my code on the Menu component:

return (
    <Menu
      id="profile-drawer"
      classNames={classes}
      placement="end"
      controlRefProp="ref"
      control={
        <div
          id="avatar-image"
          style={{
            background: 'transparent none repeat scroll 0% 0%',
            border: 'medium none',
            boxShadow: 'none',
            margin: '0',
          }}
        >
          <Avatar
            id="avatar"
            src={
              user?.avatar?.publicUrlTransformed ||
              `https://ui-avatars.com/api/?name=${user?.username}&background=random`
            }
          />
        </div>
      }
    >
      <MenuItem id="account-item" component={NextLink} href="/account">
        My Account
      </MenuItem>
      <MenuItem id="friends-item" component={NextLink} href="/friends">
        Friends
      </MenuItem>
      <MenuItem id="signout-item" component={SignOut} />
    </Menu>
  );

[BradNut]

I'm just unsure about my mix and matching styled components and Mantine JSS as the top level _app and _document only have Mantine implemented. I am still using styled-components throughout the code until I refactor to JSS if I choose to adopt Mantine.

[rtivital]

Please see https://mantine.dev/core/menu/#server-side-rendering

[BradNut]

Hi @rtivital. That seems have fixed the SSR Id mismatch. I will continue to look at the SSR sections for each component when implementing them. Thank you.