在uni-app中，uni-data-picker 组件的内置样式确实较为固定，直接通过普通的CSS修改可能会遇到一些限制。不过，你可以通过一些技巧来覆盖默认样式或实现自定义样式。以下是一些可能的解决方案，包括使用插槽和自定义样式类：

方案一：使用插槽（如果uni-data-picker支持）

虽然uni-data-picker的官方文档可能没有明确指出支持插槽，但一些自定义组件可能会支持插槽来实现内容的自定义。你可以尝试以下代码（假设支持插槽）：

<template>
  <view>
    <uni-data-picker>
      <template #custom-header>
        <view class="my-custom-header">自定义头部</view>
      </template>
      <template #custom-footer>
        <view class="my-custom-footer">自定义底部</view>
      </template>
    </uni-data-picker>
  </view>
</template>

<style>
.my-custom-header {
  background-color: #ff0000;
  color: white;
  padding: 10px;
}

.my-custom-footer {
  background-color: #00ff00;
  color: black;
  padding: 10px;
}
</style>

方案二：覆盖默认样式

如果uni-data-picker不支持插槽，你可以尝试通过覆盖默认样式来修改外观。这需要找到对应的类名并修改。由于uni-app编译后会转换为小程序代码，直接操作DOM可能受限，但你可以通过CSS变量和自定义类名来尝试：

<template>
  <view>
    <uni-data-picker class="my-custom-picker"></uni-data-picker>
  </view>
</template>

<style scoped>
/* 注意：这里的类名可能需要你通过开发者工具查看实际渲染后的DOM来确定 */
.my-custom-picker .uni-picker-view {
  background-color: #f0f0f0 !important; /* 使用 !important 提高优先级 */
}

.my-custom-picker .uni-picker-item {
  color: #333 !important;
  font-size: 16px !important;
}

/* 如果需要更深入的定制，可能需要进一步覆盖其他类名 */
</style>

方案三：使用Shadow DOM（高级）

如果uni-data-picker使用了Web Components，并且其样式被封装在Shadow DOM中，那么直接修改会非常困难。你可能需要联系组件的开发者，请求暴露更多样式定制选项。

总结

由于uni-data-picker的具体实现细节和限制可能因版本而异，以上方法的有效性需要你在实际项目中验证。如果上述方法都不奏效，建议查阅最新的uni-app文档或社区，看看是否有其他开发者提供了解决方案。