1、展示页面的框架结构：

2、然后，我们上二张图对比一下：

图1-1

需要的效果图：

图1-2

对比一下图1-1与图1-2，我们就会发现图1-1中的农历，换行显示了，第二张是有效的。

3、我们修改样式，让其变成我们想要的样式：

<style lang="less" scoped>
  @width: 425px;

  .lua-date-picker-custom {
    background: none !important;

    .ant-picker-panel-container {
      width: @width;
      background: #fff !important;
      color: #000000 !important;
    }

    .ant-picker-panel {
      width: @width;
      border: 0px solid #000000 !important;
    }

    .ant-picker-header {
      width: @width;
      color: #000000 !important;
    }

    .ant-picker-content {
      width: @width - 20px;
    }

    .ant-picker-content th,
    td {
      color: #000000 !important;
    }

    .ant-picker-content td:hover > .ant-picker-cell-inner {
      background: #fff !important;
    }

    .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
    .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(
        .ant-picker-cell-range-end
      ):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
      .ant-picker-cell-inner {
      background: #fff !important;
    }

    .ant-picker-cell-inner {
      background: #fff !important;
    }

    .ant-picker-time-panel-column
      > li.ant-picker-time-panel-cell
      .ant-picker-time-panel-cell-inner {
      color: #000000 !important;
    }

    .ant-picker-time-panel-column
      > li.ant-picker-time-panel-cell-selected
      .ant-picker-time-panel-cell-inner {
      background: #fff !important;
    }

    .ant-picker-datetime-panel .ant-picker-time-panel {
      border-left: 1px solid #000000 !important;
    }

    .ant-picker-time-panel-column:not(:first-child) {
      border-left: 1px solid #000000 !important;
    }

    .ant-picker-ok {
      background: #fff !important;
      color: #fff !important;
    }

    .ant-btn-primary[disabled],
    .ant-btn-primary[disabled]:hover,
    .ant-btn-primary[disabled]:focus,
    .ant-btn-primary[disabled]:active {
      color: #fff;
      border: none;
      background: #fff !important;
      text-shadow: none;
      box-shadow: none;
    }

    .ant-picker-range-arrow::after {
      border-color: #c0c4cc #c0c4cc transparent transparent;
    }
  }
</style>

3、我们发现代码中感觉没有什么不对的地方，但是为什么会出现不太稳定的情况呢，初始加载是好的，然后再次退出Modal，再次进入Modal就变窄了，就是变长了一些，宽度变小，导致农历显示换行的情况。

4、然后我们把scoped去掉，就会发现竟然好了，这个scoped是局部的意思，然后是在Modal中显示出来的。

5、稳定的css的写法如下：

<style lang="less">
  @width: 425px;

  .lua-date-picker-custom {
    background: none !important;

    .ant-picker-panel-container {
      width: @width;
      background: #fff !important;
      color: #000000 !important;
    }

    .ant-picker-panel {
      width: @width;
      border: 0px solid #000000 !important;
    }

    .ant-picker-header {
      width: @width;
      color: #000000 !important;
    }

    .ant-picker-content {
      width: @width - 20px;
    }

    .ant-picker-content th,
    td {
      color: #000000 !important;
    }

    .ant-picker-content td:hover > .ant-picker-cell-inner {
      background: #fff !important;
    }

    .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
    .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(
        .ant-picker-cell-range-end
      ):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
      .ant-picker-cell-inner {
      background: #fff !important;
    }

    .ant-picker-cell-inner {
      background: #fff !important;
    }

    .ant-picker-time-panel-column
      > li.ant-picker-time-panel-cell
      .ant-picker-time-panel-cell-inner {
      color: #000000 !important;
    }

    .ant-picker-time-panel-column
      > li.ant-picker-time-panel-cell-selected
      .ant-picker-time-panel-cell-inner {
      background: #fff !important;
    }

    .ant-picker-datetime-panel .ant-picker-time-panel {
      border-left: 1px solid #000000 !important;
    }

    .ant-picker-time-panel-column:not(:first-child) {
      border-left: 1px solid #000000 !important;
    }

    .ant-picker-ok {
      background: #fff !important;
      color: #fff !important;
    }

    .ant-btn-primary[disabled],
    .ant-btn-primary[disabled]:hover,
    .ant-btn-primary[disabled]:focus,
    .ant-btn-primary[disabled]:active {
      color: #fff;
      border: none;
      background: #fff !important;
      text-shadow: none;
      box-shadow: none;
    }

    .ant-picker-range-arrow::after {
      border-color: #c0c4cc #c0c4cc transparent transparent;
    }
  }
</style>

只是把scoped给去掉了，就达到了我们的效果，其实就是全局样式的意思。

6、经过实测以后，我们发现不管是将css放到主页面，还是放到Modal中，一定要去掉scoped才行，否则不生效。