Question

我从npm下载了一个非常好用的组件，但我想知道是否有办法覆盖此组件的默认样式？就像我在使用CSS时可以覆盖样式一样。

该样式目前在位于index.js的组件的node_modules/react-native-floating-label-text-input文件中定义。

我想做这样的事情：

<FloatLabelTextInput style={styles.textbox} />

const styles = StyleSheet.create({
  textbox: {
    container: {
      height: 30,
      backgroundColor: 'red'
    }, etc...
   }
});

其中styles.textbox包含组件的所有新样式。我正在使用此组件作为示例，但这可以适用于来自npm。

的任何组件

感谢。

Answer 1

许多react-native组件构建为接收样式道具，而样式道具又用于覆盖相应内部组件的默认样式。如果没有记录这些，你可以尝试检查模块的源代码，看它是否收到任何这样的道具（不一定必须被称为style）。

我回顾了这个特定的模块，遗憾的是它似乎没有收到selectionColor以外的任何样式道具，它可以让你在输入聚焦时改变标签的颜色。

要反驳您的示例，我将提及react-native-floating-labels，它支持labelStyle，inputStyle和style道具，分别覆盖默认标签，TextInput和容器样式。

如果组件不支持任何样式属性，则没有一种真正的方法可以覆盖其样式，因为您发送的任何其他道具都将被忽略。

编辑 - 我刚刚意识到这个问题已经过了一年多了，但我想也许有人会觉得它很有用，因为它仍然会出现在Google上