Text component inline style overrides global style [color]

[JinYuSha0]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the issue

Expected behavior

Why text component's color defaults to black instead of inheriting This is incompatible with browser specifications https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Text/index.js#L189

Steps to reproduce

Add global styles and create text components

Test case

https://codesandbox.io/p/sandbox/fervent-lichterman-jv4n25

Additional comments

In fact, the performance of react-native on Android follows AppTheme, and iOS has Appearance, so it is more reasonable to set it as inheritance.

[JinYuSha0]

I submitted this PR [#2635]

[necolas]

This is how Text works in react native

[JinYuSha0]

Well, if anyone encounters this problem, say you want to modify the font color globally in react-native-web, or switch themes, you can try this solution:

import {Platform, Text, View} from 'react-native';
import React from 'react';
import RootStack from './src/navigation/rootStack';

function App(): React.JSX.Element {
  const content = (
    <AppProvider>
      <RootStack />
    </AppProvider>
  );
  if (Platform.OS === 'web') {
    // Why wrapped by Text component?
    // Create a TextAncestorContext, make the color of the child Text component inherited
    // Related issues: https://github.com/necolas/react-native-web/issues/2634
    return (
      <Text style={{flex: 1, display: 'flex', color: 'your target color'}}>
         {content}
      </Text>
    );
  }
  return content;
}

export default App;