Need To Customize Style

[MKR2554]

Add Feature for customize the css property .

[adisatriakw]

@lanjingling0510 is it possible to add className props to component ? if so, it would be better

[anewcoder1992]

@lanjingling0510 is it possible to add className props to component ? if so, it would be better you can add classname by yourself. then add your custome css. my component flowing:

import React, { useEffect } from 'react'
import DatePicker from 'react-mobile-datepicker'
import './index.less'

const MyDatePicker = ({
  isOpen,
  onSelect,
  onCancel,
  confirmText,
  cancelText,
  value,
}) => {
  useEffect(() => {
    const modalElement = document.getElementsByClassName('Modal-Portal')[0]
    modalElement.classList.add('myDatePicker')
  }, [])
  return (
    <DatePicker
      theme="ios"
      isOpen={isOpen}
      showHeader={false}
      value={value}
      onCancel={onCancel}
      onSelect={onSelect}
      confirmText={confirmText}
      cancelText={cancelText}
    />
  )
}
export default MyDatePicker

my css file

.myDatePicker {
  .datepicker-modal {
    position: fixed;
  }
  .datepicker.ios {
    background-color: #ffffff;
    border-radius: 20px 20px 0px 0px;
    .datepicker-navbar {
      top: 20px;
    }
    .datepicker-content {
      padding-top: 94px;
    }
    .datepicker-navbar-btn {
      font-size: 28px;
      height: 74px;
      line-height: 74px;
      font-family: SF Pro Text, SF Pro Text-Regular;
      color: #0081cc;
    }
    .datepicker-scroll {
      & > li {
        font-size: 28px;
        font-family: SF Pro Text, SF Pro Text-Semibold;
        font-weight: 600;
        color: #262626;
      }
    }
  }

  .lockBody {
    overflow: hidden;
  }
}