React App (CRA) erstellen: Das Shadcn-Framework sieht seltsam aus ⇐ CSS

[Anonymous]

Für eine bestehende Create React App (CRA) wollte ich das shadcn-Framework installieren, um einige Komponenten wie die Datumsauswahl zu verwenden.
Ich habe shadcn wie hier beschrieben ein paar Mal manuell installiert, aber meine Komponenten sehen einfach nicht wie die auf der Website aus (siehe beigefügtes Bild).
Ich habe Preflight ausgeschaltet, weil der Rückenwind mein benutzerdefiniertes Design ziemlich durcheinander gebracht hat. Gibt es eine Option, nur Rückenwind für die Shadcn-Komponenten zu verwenden?


Das ist meine lib/utils.ts:

Code: Select all

import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

Und das ist meine tailwind.config.ts:

Code: Select all

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
corePlugins: {
/* Disable preflight so that it doesn't mess up my design */
preflight: false,
}
}

Was ich auch versucht habe:
Ich habe versucht, den Beispielinhalt von shadcn in einen bestimmten Container zu packen, den ich in meiner tailwind.config.js wie folgt aktiviert habe, aber es hat nicht funktioniert:

Code: Select all

export const LandingPageHero: React.FC = () => {
const [date, setDate] = React.useState({
from: new Date(2022, 0, 20),
to: addDays(new Date(2022, 0, 20), 20),
})

return (

{/* Background and other custom JSX */}

{/* TODO: Searchbar */}






{date?.from ? (
date.to ? (

{format(date.from, "LLL dd, y")} -{" "}
{format(date.to, "LLL dd, y")}

) : (
format(date.from, "LLL dd, y")
)
) : (
Pick a date
)}









);
};

Vielen Dank für Ihre Zeit!