title: Is it possible to style the past and future dates of react date picker?
body: <p>I am using react date picker to build a custom date but I cant seem to be able to style past dates. All dates lower than the present date should have a grey background.The present date should have a past background and the future dates should all have a white background with a black border;</p>
  <p>Code I have written to override current styles but I cant seem to figure this out</p>
  <pre><code>
  .css-gbrmys&gt;*:not(style)~*:not(style){
      margin-top: 0px !important;
  }
  
  .react-datepicker__input-container &gt; input {
   height: 42px !important;
   border-radius: 8px !important;
   background: #fff !important;
   width: 100% !important;
   border: 1px solid #E0E0E0 !important;
   text-indent: 12px;
  }
  
  .react-datepicker__triangle{
      display: none !important;
  }
  
  .react-datepicker__header{
    border: none !important;
    background-color: #fff !important;
  }
  .css-2v22cu{
      margin-top: 13px !important;
      margin-bottom: 13px !important;
      
  }
  .react-datepicker{
      font-family: 'Red Hat Display', sans-serif !important;
      font-size: 14px !important;
      border: none !important;
      border-radius: 8px !important;
      box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.06) !important;
  }
  
  .react-datepicker__current-month{
      font-size: 18px !important;
  }
  .react-datepicker__day-name{
      color: #9C9C9C !important;
      font-size: 14px !important;
      line-height:  21px !important;
  }
  
  .react-datepicker__day-names{
      margin-left: 18px !important;
      margin-right: 18px !important;
  }
  
  .react-datepicker__day{
      background: #EEEEEE !important;
      font-size: 14px !important;
      line-height:  21px !important;
      border-radius: 4px !important;
      color: #9C9C9C !important;
  }
  
  .react-datepicker__day--selected{
      background: #000000 !important;
      color: white !important;
  }
  .react-datepicker__month {
      margin-bottom: 25px !important;
      margin-top: 0.4rem !important;
      margin-left: 0.4rem !important;
      margin-right: 0.4rem !important;
  }
  </code></pre>