Настройте TextInput Label для реактивной бумаги в случае React Native Web

Question

Я работаю с библиотеками React Native Web и React Native Paper со стилизованными компонентами. В основном я хотел бы настроить внутренние компоненты TextInput: Label и html input

Вопросы:

1) Как изменить стили Label? например. ширина \ размер \ цвет, эт c. ?
2) Как изменить html ввод стилей?

Я хочу установить outline: none, чтобы предотвратить отображение синей рамки на фокусе в случае браузера. Я понимаю, что в случае с native у нас нет html, и нативная сеть передает его.

И я не могу понять, как поймать вложенный компонент метки, чтобы изменить его стили. Потому что я хочу показать серая метка, если она не заполнена, фиолетовая , если она заполнена, и текст ввода должен быть черный . В случае с Интернетом это тривиально, но в случае с нативным я не знаю, как с этим справиться.

Так возможно ли это вообще?

Спасибо за любую помощь. Вот пример кода

import React from 'react';

import {
  View,
  Platform,
} from 'react-native';

import {
  TextInput as NativePaperInput,
  withTheme,
} from 'react-native-paper';

import styled from 'styled-components/native';

const NativePaperInputThemed = withTheme(NativePaperInput);

export const TextInputStyled = styled(NativePaperInputThemed)`
    ${(props: any) => {
      return `
        outline: none;  // doesn't work
        input: { outline: none; } // doesn't work
        & input: { outline: none; } // doesn't work
        // Label change style ? 
        color: ${props.theme.theme10x.palette.typography.placeholder}; // doesn't work


        border-color: '#f92a2a8a'; // doesn't work
        height: 52px;
      `;
    }
  }
`;

PS В основном даже цвета и fontFamily как-то не работают

Answer 1

Какой-то парень пытался изменить стиль метки вручную, ответ сопровождающего:

Вы можете передать fontSize с помощью стиля prop. Однако это повлияет как на метку, так и на ввод текста. Невозможно изменить только один из них.

https://github.com/callstack/react-native-paper/issues/1505