lanjingling0510 / react-mobile-datepicker

🙊 👻 look a demo, Please imitate mobile environment.
https://codepen.io/lanjingling0510/pen/LRpOYp?editors=1010
MIT License
301 stars 145 forks source link

Need To Customize Style #47

Open MKR2554 opened 4 years ago

MKR2554 commented 4 years ago

Add Feature for customize the css property .

adisatriakw commented 4 years ago

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

anewcoder1992 commented 2 years ago

@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; } }