微信小程序组件高度调整的灵活解法：突破!important限制
在微信小程序开发中，调整组件高度常常会遇到挑战，即使使用了!important声明，有时也无法如愿。本文将通过一个案例，演示如何在!important之后有效修改组件高度。
问题：如图所示（图片已包含），某个组件的高度使用了!important属性，但我们需要动态调整其高度。
解决方案：关键在于理解组件高度的设置方式。很多情况下，组件高度并非直接硬编码，而是通过CSS变量动态控制。即使使用了!important，我们依然可以通过修改CSS变量来间接改变组件高度。
具体步骤：由于组件库（例如@vant）可能未定义所有CSS变量，我们可以直接在全局样式表app.wxss中覆盖该变量。 例如，假设组件高度由--calendar-confirm-button-height变量控制，则只需在app.wxss中添加如下代码：
<code class="css">page {
--calendar-confirm-button-height: 100px; /* 设置所需高度 */
}</code>
这段代码会将--calendar-confirm-button-height变量的值设置为100px。 只要浏览器支持var()函数，组件就会根据这个新的变量值自动更新高度。 如果组件样式中包含类似height: var(--calendar-confirm-button-height, 36px) !important;的语句，那么当--calendar-confirm-button-height被重新赋值后，高度将被修改为新值；如果没有设置--calendar-confirm-button-height，则会使用默认值36px。 通过这种方法，巧妙地绕过了!important的限制，实现了组件高度的灵活调整。
