uniapp uni-data-picker 如何修改样式

在uniapp中使用uni-data-picker组件时，发现默认样式不太符合项目需求。想请教下如何修改它的样式？比如调整选择器的宽度、高度、字体颜色等。尝试过直接修改组件样式但没生效，是需要通过深度选择器还是其他方式实现？求具体修改方法和注意事项。

2 回复

可通过以下方式修改uni-data-picker样式：

  1. 使用CSS深度选择器
/deep/ .uni-data-picker {}

  1. 修改组件class 检查元素找到对应class名，通过CSS覆盖样式

  2. 使用自定义样式类 在组件上添加custom-class属性，然后写对应样式

  3. 修改全局样式 在App.vue中写全局样式影响所有组件

推荐使用深度选择器或自定义类的方式修改。


在uni-app中，修改uni-data-picker组件样式可以通过以下几种方式：

1. 使用CSS修改样式

/* 全局样式 */
uni-data-picker {
  /* 修改整体样式 */
}

/* 修改选择器弹窗 */
.uni-data-picker-popup {
  background-color: #f5f5f5;
}

/* 修改选项样式 */
.uni-data-picker-item {
  color: #333;
  font-size: 14px;
}

/* 修改选中项样式 */
.uni-data-picker-item.selected {
  color: #007aff;
  background-color: #e6f3ff;
}

2. 使用深度选择器（重要）

如果样式不生效，使用深度选择器：

/* 使用 /deep/ */
::v-deep .uni-data-picker-popup {
  background-color: #fff;
}

::v-deep .uni-data-picker-item {
  height: 44px;
  line-height: 44px;
}

3. 通过props修改部分样式

<uni-data-picker
  placeholder="请选择"
  :border="false"
  popup-title="自定义标题"
  :popup-style="{
    background: '#ffffff',
    height: '60vh'
  }"
/>

4. 常用样式修改示例

/* 修改输入框样式 */
::v-deep .uni-data-picker-input {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
}

/* 修改弹窗头部 */
::v-deep .uni-data-picker-header {
  background-color: #007aff;
  color: white;
}

/* 修改确认按钮 */
::v-deep .uni-data-picker-confirm {
  color: #007aff;
  font-weight: bold;
}

注意事项：

  1. 使用::v-deep或/deep/来穿透组件样式
  2. 部分样式可能需要使用!important来覆盖默认样式
  3. 建议在页面或组件的作用域样式中修改
  4. 不同平台（H5、小程序）可能有细微差异

通过以上方法，你可以灵活地自定义uni-data-picker的外观样式。

回到顶部