import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  inputClass="custom-input"
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

.custom-input {
  border-radius: 15px;
  border: 1px #0c8af8 solid;
  padding: 4px 12px;
  background-color: white;
  height: 22px;
  box-shadow: 0 0 2px #0074d9;
}

.custom-input:focus {
  outline: none;
  border: 1px solid #0c8af8;
  box-shadow: 0 0 10px 2px #0074d9;
}

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  style={{
    backgroundColor: "aliceblue",
    height: "24px",
    borderRadius: "8px",
    fontSize: "14px",
    padding: "3px 10px"
  }}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

به یاد داشته باشید که هر مقداری را که به عنوان className وارد می کنید ، همزمان به عنوان کلاس arrow هم اعمال می شود.

از آنجا که کلاس تقویم rmdp-wrapper. است ، از سلکتور .rmdp-wrapper.YOUR_CLASSNAME در پرونده css استفاده کنید تا کلاسی که برای تقویم اعمال می کنید با arrow تداخل نداشته باشد.

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  className="custom-calendar"
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

rmdp مخفف react multi date picker هست.

ep مخفف element popper هست.

.custom-calendar.rmdp-wrapper,
.rmdp-container .custom-calendar.ep-arrow::after {
  background-color: bisque;
}

.rmdp-container .custom-calendar.ep-arrow[direction="bottom"] {
  border-top: 1px solid bisque;
}

.rmdp-container .custom-calendar.ep-arrow[direction="top"] {
  border-bottom: 1px solid bisque;
}

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  arrowStyle={{
    backgroundColor: "black"
  }}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  arrowClassName="custom-arrow"
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

.rmdp-container .ep-arrow.custom-arrow::after {
  background-color: blue;
}

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  style={{
    width: "100%",
    boxSizing: "border-box",
    height: "26px"
  }}
  containerStyle={{
    width: "100%"
  }}
  calendarPosition="bottom-center"
  calendar={persian}
  locale={persian_fa}
/> 

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  containerClassName="custom-container"
  calendarPosition="bottom-center"
  calendar={persian}
  locale={persian_fa}
/> 

.custom-container {
  width: 100%;
}

.custom-container .rmdp-input {
  width: 100%;
  box-sizing: border-box;
  height: 26px;
}