[@mantine/core] feat: switch theme variant for buttons

[yusufbkr]

<Button
  variant={{
    light: 'filled',
    dark: 'outline',
  }}
>
  Button
</Button>

actually this is just an idea, this can be applied to all other components. i think it is a good idea as a user experience.

[rtivital]

This will not work with SSR, it will produce a hydration mismatch as color scheme value is not known on the server (it is initialized before first mount on client).

[yusufbkr]

This will not work with SSR, it will produce a hydration mismatch as color scheme value is not known on the server (it is initialized before first mount on client).

we just need to add “use client”; for nextjs.

"use client";
import {
  Button as MantineButton,
  ButtonProps,
  useMantineColorScheme,
  ButtonVariant,
} from "@mantine/core";

const Button = ({
  children,
  ...props
}: Omit<ButtonProps, "variant"> & {
  variant: {
    dark: ButtonVariant;
    light: ButtonVariant;
  };
}) => {
  const { colorScheme } = useMantineColorScheme();
  const variant =
    colorScheme !== "auto"
      ? props.variant?.[colorScheme] || "filled"
      : "filled";

  return (
    <MantineButton {...props} variant={variant}>
      {children}
    </MantineButton>
  );
};

export default Button;

it works like this

[rtivital]

'use client' components are rendered on the server and will produce hydration mismatch if the user color scheme does not match the value defined on the server.