给react-mobile-datepicker添加自己的样式

最新推荐文章于 2024-08-23 07:52:32 发布

界大宝

最新推荐文章于 2024-08-23 07:52:32 发布

阅读量370

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/rng2uzi/article/details/129282543

版权

最近写了一个项目需要使用日期选择器，适配移动端。很不巧的是，我使用的是antd中的日期选择器，放到移动端，简直没发看，不但字体小，选择难。最主要不适配移动端，反移动端。
真是难死了

经过百度查到一个叫react-mobile-datepicker的一个移动端日期选择器
这里给大家挂一个链接就不详讲操作手册了
react-mobile-datepicker
它的功能十分强大，而且适配移动端非常合适。

<DatePicker
      isOpen={isOpen}
      showHeader={false}
      value={value}
      onCancel={onCancel}
      onSelect={onSelect}
      confirmText={confirmText}
      cancelText={cancelText}
    />

这是引入进来后的组件可以绑定一些参数，但是我现在的版本报了一个错误，我也不知道为什么，但是不影响使用，哪位小伙伴知道可以在评论区留言讨论把这个报错去掉。

错误：

Warning: ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported in React 18. Consider using a portal instead. Until you switch to the createRoot API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
    at Modal

样式问题：
在这里插入图片描述

在手机上小的可怜不好选择连确定都不好点击，并且在我写入样式都不生效，无论是加入！import。
还是提高css权重都无法使得样式问题得到更改。

但是我突然想到因为咱们是通过点击事件才让它展示的,也就是说咱们页面是没有渲染到这个样式的，
他是通过添加的方式来添加到页面的

所以咱们也用添加的方式来给组件强制增加css

let datepickerScroll = document.getElementsByClassName('datepicker-scroll')
		let datepickerHeader = document.getElementsByClassName('datepicker-header')
		let datepickerNavbarBtn = document.getElementsByClassName('datepicker-navbar-btn')
		for (let index = 0; index < datepickerScroll.length; index++) {
			for (let inde = 0; inde < datepickerScroll[index].childNodes.length; inde++) {
				datepickerScroll[index].childNodes[inde].style.fontSize = "30px"
			}
		}
		for (let index = 0; index < datepickerNavbarBtn.length; index++) {
			datepickerNavbarBtn[index].style.fontSize = "60px"
		}
		for (let index = 0; index < datepickerHeader.length; index++) {
			datepickerHeader[index].style.fontSize = "60px"
		}