update App.js and src/components/TestComponentNew/index.js

src/components/TestComponentNew/index.js

@@ -1,5 +1,7 @@
 import React, { useRef, useState } from "react";
 
+import "./index.scss";
+
 import { Calendar } from "react-multi-date-picker";
 import DatePicker from "react-multi-date-picker";
 
@@ -21,6 +23,9 @@ const TestComponentNew = () => {
         fixRelativePosition={true}
         calendarPosition={`${"bottom"}-${"center"}`}
         onClose={() => false}
+        arrow={false}
+        inputClass="custom-input"
+        className="custom-calendar"
         style={{
           width: "100%",
           height: "33px",

src/components/TestComponentNew/index.scss

@@ -0,0 +1,28 @@
+.custom-input {
+  border-radius: 15px;
+  border: 1px #0c8af8 solid;
+  padding: 4px 12px;
+  background-color: white;
+  height: 22px;
+  box-shadow: 0 0 2px #0074d9;
+  //   display: none !important;
+}
+
+.custom-input:focus {
+  outline: none;
+  border: 1px solid #0c8af8;
+  box-shadow: 0 0 10px 2px #0074d9;
+}
+
+.rmdp-arrow-container {
+  background-color: #0074d9;
+  border-radius: 2px !important;
+  height: 24px !important;
+  width: 24px !important;
+}
+
+.rmdp-arrow-container .rmdp-arrow {
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  margin-top: 8px !important;
+}