Unable to apply custom styles to Radix UI components when used within ShadcnUI package

[onurhan1337]

I'm using @radix-ui/themes components within the ShadcnUI package in my project. However, I'm encountering an issue where I'm unable to use these components.

In the code block below, using the useMediaQuery hook, if it is a mobile device, the drawer element in shadcn-ui will work, if it is a computer, the Dialog element of the @radix-ui/themes package will work. The components in the <ProjectCreateForm /> element (such as input) are Radix-ui elements, but there is no problem with them either.

Although I have not added any properties to the @radix-ui/themes buttons other than the properties it offers, many styles do not work when working in the drawer. How can I prevent this?

import { Button, Dialog } from "@radix-ui/themes";
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
import useMediaQuery from "@/lib/hooks/use-media-query";
import { projectCreateFormState } from "@/lib/store";
import ProjectCreateForm from "./form";

const ProjectCreateContent = () => {
  const { isOpen, setOpen } = projectCreateFormState();
  const { isMobile } = useMediaQuery();

  if (isMobile) {
    return (
      <Drawer open={isOpen} onOpenChange={(open: boolean) => setOpen(open)}>
        <DrawerTrigger asChild>
          <Button color={"lime"} size={"2"}>
            Create Project
          </Button>
        </DrawerTrigger>
        <DrawerContent>
          <div className="p-2">
            <ProjectCreateForm />
          </div>
        </DrawerContent>
      </Drawer>
    );
  }

  return (
    <Dialog.Root open={isOpen} onOpenChange={(open: boolean) => setOpen(open)}>
      <Dialog.Trigger>
        <Button color={"lime"} size={"2"}>
          Create Project
        </Button>
      </Dialog.Trigger>
      <Dialog.Content style={{ maxWidth: 450 }}>
        <Dialog.Title>Create Project</Dialog.Title>
        <Dialog.Description size="2" mb="4">
          Create a new project.
        </Dialog.Description>
        <ProjectCreateForm />
      </Dialog.Content>
    </Dialog.Root>
  );
};

export default ProjectCreateContent;