使用 Tailwind CSS 设计 Material-UI“DateCalendar”组件

Question

我正在努力实现一个迷你日历，与出现在左上角的Google's日历非常相似（有一些设计更改）。我使用

Tailwind

来设计反应组件，并选择使用 Material-UI DateCalendar 我发现它是正确的选择，因为与我的设计有细微差别，我想向此组件添加

Tailwind

类我怎样才能实现这个目标。

我的日历设计-

我已经为我的项目设置了

Tailwind

，我知道使用

Tailwind

类可能会与

material-ui

- 在 React 项目中使用材料 ui 和 Tailwind css 发生冲突，但我只需要这一个组件（我猜).

从头开始构建它可能会更耗时，但我也愿意使用其他一些组件库，如果不可能的话，我也会从头开始构建它。

我能找到的最相关的问题是 - MUI 日期日历样式，但我需要使用

Tailwind

来实现这一点。

欢迎您的建议和解答，谢谢。

Answer 1

不确定是否使用 Tailwind 来实现这一点。 如果您使用 Mui DatePicker，您可以使用以下代码使用 Mui 样式实现您共享的设计。

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticDatePicker
    defaultValue={dayjs('2023-12-06')}
    className={""}
    slotProps={{toolbar: {hidden: true}, actionBar: {actions: []}}}
    showDaysOutsideCurrentMonth
    sx={{
      button: {
        "&.Mui-selected": {
          backgroundColor: "black"
        },
      },
      "& .MuiPickersCalendarHeader-labelContainer": {
        mr: "0",
        svg: {
          display: "none"
        },
      }
    }}
  />
</LocalizationProvider>

我实现的输出是