React-native：覆盖外部组件的样式

【问题标题】：React-native: Override the style of an external componentReact-native：覆盖外部组件的样式
【发布时间】：2016-06-03 02:55:54
【问题描述】：

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

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

我想做这样的事情：

<FloatLabelTextInput style={styles.textbox} />

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

其中styles.textbox 包含组件的所有新样式。我以这个组件为例，但这可能适用于来自npm 的任何组件。

谢谢。

【问题讨论】：

【解决方案1】：

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

我查看了这个特定模块，遗憾的是它似乎没有收到除 selectionColor 之外的任何样式道具，它可以让您在输入焦点时更改标签的颜色。

为了反驳你的例子，我会提到react-native-floating-labels，它支持labelStyle、inputStyle 和style 分别覆盖默认标签、TextInput 和容器样式的道具。

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

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

【讨论】：