Tenho um componente de botão:
Arquivo index.js
:
import React from 'react';
import {ActivityIndicator} from 'react-native';
import {Container, Text} from './styles';
import PropTypes from 'prop-types';
export default function Button({children, loading, ...rest}) {
return (
<Container {...rest}>
{loading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text>{children}</Text>
)}
</Container>
);
}
Arquivo styles.js
:
import styled from 'styled-components/native';
import {RectButton} from 'react-native-gesture-handler';
export const Container = styled(RectButton)`
background: #23dc42;
border-radius: 4px;
height: 46px;
width: 100%;
margin: 5px;
align-items: center;
justify-content: center;
`
;
export const Text = styled.Text`
color: #fff;
font-size: 16px;
font-weight: bold;
`;
E utilizo o botão em duas páginas, porém em uma das páginas gostaria de alterar a cor dele e manter a cor do componente nas outras. Tem como?