Создать приложение React (CRA): платформа Shadcn выглядит странно ⇐ CSS

[Anonymous]

Для существующего приложения Create React (CRA) я хотел установить инфраструктуру shadcn, чтобы использовать некоторые компоненты, такие как средство выбора даты.
Я несколько раз устанавливал shadcn вручную, как указано здесь, но мои компоненты просто не похожи на те, что на веб-сайте (см. прикрепленное изображение).
Я отключил предполетную подготовку, потому что попутный ветер сильно испортил мой индивидуальный дизайн. Есть ли возможность просто использовать попутный ветер для компонентов shadcn?


Это моя библиотека lib/utils.ts:

Код: Выделить всё

import { twMerge } from "tailwind-merge"

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

А это мой Tailwind.config.ts:

Код: Выделить всё

/** @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,
}
}

Что я также пробовал:
Я пытался обернуть пример содержимого из shadcn в определенный контейнер, который я включил в своем Tailwind.config.js, но это не сработало:

Код: Выделить всё

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
)}









);
};

Спасибо, что уделили время!


Подробнее здесь: https://stackoverflow.com/questions/796 ... ooks-weird