CSS:设计jquery ui日期选择器的样式？

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="datepicker">

/* 修改日期选择器的整体样式 */
.ui-datepicker {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* 修改日期选择器的标题样式 */
.ui-datepicker .ui-datepicker-title {
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
}

/* 修改日期选择器的日期单元格样式 */
.ui-datepicker table {
  width: 100%;
}

.ui-datepicker td {
  padding: 5px;
}

.ui-datepicker-calendar .ui-state-default {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
}

.ui-datepicker-calendar .ui-state-hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

.ui-datepicker-calendar .ui-state-active {
  background-color: #007bff;
  color: #fff;
}

/* 修改日期选择器的按钮样式 */
.ui-datepicker .ui-datepicker-buttonpane {
  background-color: #f0f0f0;
  padding: 10px;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  margin-right: 5px;
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background-color: #0056b3;
}

$(function() {
  $("#datepicker").datepicker();
});