gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 09:10:44 25 4
gpt4 key购买 nike

我正在使用带有样式化组件的 React Native Web 和 React Native Paper 库。基本上我想自定义 TextInput 内部组件:Label 和 html input

问题是:

1)如何改变标签样式?例如。宽度\尺寸\颜色等 ?
2) 如何改变 html input 样式?

我想设置outline: none 以防止在浏览器的情况下蓝色边框显示在焦点上。我知道在 native 的情况下我们没有 html 并且 native-web 转译它。

而且我无法理解如何捕获 嵌套标签组件以更改其样式。因为我想在未填充时显示灰色标签,在填充时显示紫色并且输入文本应该是黑色。在 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 都无法正常工作

最佳答案

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

关于react-native - 在 React Native Web 的情况下自定义 react-native-paper 的 TextInput Label,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61063835/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com