在 React Native Web 的情况下自定义 react-native-paper 的 TextInput Label答案

【问题标题】：Customize TextInput Label of the react-native-paper in the case of React Native Web在 React Native Web 的情况下自定义 react-native-paper 的 TextInput Label
【发布时间】：2020-07-18 16:32:46
【问题描述】：

我正在使用带有样式组件的 React Native Web 和 React Native Paper 库。基本上我想自定义 TextInput 内部组件：标签和 html 输入

问题是：

1）如何更改标签样式？例如。宽度\尺寸\颜色等？
2) 如何更改html 输入 样式？

我想设置outline: none 以防止在浏览器的情况下蓝色边框显示在焦点上。我知道在原生的情况下，我们没有 html 并且原生网络会对其进行编译。

而且我不明白如何catch 嵌套标签组件来更改其样式。因为我想在未填充时显示 gray 标签，在填充时显示 violet 并且输入文本应该是 black。在web的情况下，这是微不足道的，但在native的情况下，我不知道如何处理。

那有可能吗？

感谢您的帮助。这是代码示例

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;
      `;
    }
  }
`;

附：基本上，即使颜色和 fontFamily 也无法正常工作

【问题讨论】：

标签： react-native styled-components react-native-web react-native-paper

【解决方案1】：

有人尝试手动更改标签样式，维护者回复：

您可以通过 style 属性传递 fontSize。但是会影响双方标签和输入文本。没有办法只改变其中一个。

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

【讨论】：

感谢@Maycon 的评论。原生 html 输入也一样？另外，我正在尝试设置字体系列，但它不起作用。连颜色都不行。它告诉：`失败的道具类型：无效`props.style键color提供给View。坏对象：{ "color": "#6B767A", "borderColor": "'#f92a2a8a'" }`
@Velidan 在网络上我是这么认为的：/ 但是您可以尝试通过 CSS 进行硬编码标签，将 TextInput 嵌套在视图中。我的解决方案是使用 Label（完整样式）创建我自己的 TextInput 组件。您可以基于此创建：github.com/eyaleizenberg/react-native-floating-label-text-input
谢谢@Maycon。我一定会检查这个 repo。

【解决方案2】：

label={<Text style={{fontSize: 20}}>{t('PersonalDetailsYuvitalOrg:editInput.firstName')}</Text>}

【讨论】：