如何避免通过更改主题来更新清除/轮廓按钮样式

Question

考虑这样一个简单的页面，该页面使用react-native-elements@1.1.0中的Button：

class App extends React.Component {
  render() {
    const theme = {
     // Use default
    };
    return (
      <ThemeProvider theme={theme}>
        <View style={styles.container}>
          <Button title="normal"/>
          <Button title="clear" type="clear"/>
          <Button title="outline" type="outline"/>
        </View>
      </ThemeProvider>
    )
  }
}

最初看起来像这样。

然后，我将在此处设置自定义主题。

class App extends React.Component {
  render() {
    const theme = {
      Button: {
        buttonStyle: {
          backgroundColor: 'green',
        },
      },
    };
    ...
  }
}

结果是：

不过，我想保持背景样式为清晰/轮廓类型。但是该主题系统似乎不允许这种自定义。

有人知道如何使用主题系统避免该问题吗？ 或任何解决方法。

谢谢。

Answer 1

您可以使用所需的所有属性来创建主题，然后使用传播运算符将主题仅添加到所需的按钮上。

class App extends React.Component {
  render() {
    const theme = {
        buttonStyle: {
          backgroundColor: 'green',
        },
    };
    ...
    <Button title="normal" {...theme}/>
    <Button title="clear" type="clear"/>
    <Button title="outline" type="outline"/>
  }
}