reactjs 减小MUI日期选择器的大小

xpcnnkqh  于 2023-08-04  发布在  React
关注(0)|答案(1)|浏览(105)


的数据
我使用的数据列表中的MUI日期选择器,我想减少输入字段的高度,并关闭日期和日历图标,因为日期和日历图标之间占用了很多空间,并且有椭圆形的背景,具有较大的宽度和高度,我已经删除了选择器的边框
字段集MuiOutlinedInput notchedOutline

qqrboqgw

qqrboqgw1#

要实现这些修改,请尝试使用以下样式:

/* Reduce the height of the input field */
.MuiOutlinedInput-input {
  padding-top: 10px; /* Adjust as needed */
  padding-bottom: 10px; /* Adjust as needed */
}

/* Adjust the spacing between the close date and calendar icons */
.MuiPickersDay-dayButtonStart {
  margin-left: 8px; /* Adjust as needed */
}

/* Modify the oval-shaped background */
.MuiPickersStaticWrapper-root {
  width: 200px; /* Adjust the width as needed */
  height: 200px; /* Adjust the height as needed */
  border-radius: 100px; /* To make it perfectly oval, set the border-radius to half of the width/height */
}

字符串

相关问题