Change component properties on different pages

Question

I have a button component:

Filing cabinet 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>
  );
}

Filing cabinet 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;
`;

And I use the button in two pages, but in one of the pages I would like to change its color and keep the color of the component in the others. It has as?

Answer 1

You can use props in its stylized component. For this, just use the interpolation syntax, passing a function, which you will receive as parameter props footsteps.

An example:

const Text = styled.div`
  color: ${(props) => props.color || 'black'};
  font-weight: bold;
  font-size: 50px;
`;

And to wear, something like that:

<Text color="red">Em Vermelho</Text>
<Text color="blue">Em Azul</Text>

• See a example working in the Codesandbox.
• See the documentation to learn more about the passage of props in Styled-Components.