如何修改react-native-paper DataTable标题及行文本颜色

直接在DataTable容器、表头、行、单元格的style上设置color不生效，核心原因有两个：

• React Native 没有Web端的全量文本样式继承机制，外层View设置的color不会自动传递给内层嵌套的Text组件
• react-native-paper 对DataTable.Title（表头标题）、DataTable.Cell（单元格）做了封装，内部文本默认读取主题色值，普通style属性的设置不会作用到内部Text元素

局部修改（仅修改当前表格文本颜色，优先使用） #

DataTable.Title和DataTable.Cell提供了专属的textStyle属性，该属性的样式会直接透传到内部的文本组件，直接传入颜色配置即可生效：

import { DataTable } from 'react-native-paper';

// 公共文本样式抽离，避免重复编码
const customTableTextColor = { color: 'red' };

const MyTable = () => {
  return (
    <DataTable>
      {/* 表头部分 */}
      <DataTable.Header>
        <DataTable.Title textStyle={customTableTextColor}>Name</DataTable.Title>
        <DataTable.Title textStyle={customTableTextColor}>Email</DataTable.Title>
        <DataTable.Title textStyle={customTableTextColor}>Phone</DataTable.Title>
      </DataTable.Header>

      {/* 表格内容行 */}
      <DataTable.Row>
        <DataTable.Cell textStyle={customTableTextColor}>Hassane1</DataTable.Cell>
        <DataTable.Cell textStyle={customTableTextColor}>contact@gmail.com</DataTable.Cell>
        <DataTable.Cell textStyle={customTableTextColor}>0688888888</DataTable.Cell>
      </DataTable.Row>
      {/* 其余行按相同逻辑配置即可 */}
    </DataTable>
  )
}

export default MyTable;

全局修改（项目内所有DataTable统一文本色） #

如果项目中所有DataTable都需要统一文本颜色，可以通过自定义主题覆盖默认色值实现，不需要逐单元格配置：

import { MD3LightTheme, PaperProvider } from 'react-native-paper';
import MyTable from './MyTable';

// 自定义主题，覆盖默认文本色
const appTheme = {
  ...MD3LightTheme,
  colors: {
    ...MD3LightTheme.colors,
    onSurface: 'red', // DataTable组件默认文本读取的主题色字段
  }
};

export default function App() {
  return (
    <PaperProvider theme={appTheme}>
      <MyTable />
    </PaperProvider>
  )
}

注意：onSurface是全局通用色值，修改后会影响所有依赖该色值的Paper组件（比如普通Text、Card内容文本等），如果仅需要调整表格颜色，不建议用该方案。

内容的提问来源于stack exchange，提问作者HASSANE BOUKHAL