React native styled components cannot override component's style

Question

I have a weird problem with stlyed components. I have a component Header with a basic style but when a try to use this component and extend the style nothing happens. Can someone tell me what going on?

import styled from 'styled-components/native';
export const Container = styled.SafeAreaView``;

export const Content = styled.View`
  height: 72px;
  padding: 0 24px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;

Header component

import React, { PropsWithChildren, FC } from 'react';
import { Container, Content } from './styles';

const Header: FC = ({ children }: PropsWithChildren<unknown>, props) => {
  return (
    <Container {...props}>
      <Content>{children}</Content>
    </Container>
  );
};

export default Header;

import styled from 'styled-components/native';

import Header from '../components/Header/index';

export const Container = styled(Header)`
  background: blue;
  height: 200px;
`;

You have to add in your header component a property ```className?: string``` — Vladimir Arkhangelskii, Feb 25 '22 at 13:14

score 0 · Answer 1 · answered Dec 08 '22 at 17:41

You have to pass your props from into your Header component. In Container or Content. It's won't be done instead of you.

Your Header is a React component and he "doesn't know what to do" with props that it will receive from Container - const Container = styled(Header)'...'. Props will be recognized correctly if component is working with styles, as Text, View, ...

export const Container = styled(Header)`
  background: blue;
  height: 200px;
`;

const Header: FC = ({ children, ...restProps }: PropsWithChildren<unknown>) => {
  return (
    <Container {...restProps}>
      <Content>{children}</Content> // or <Content {...restProps}>...
    </Container>
  );
};

or you have 2 next options, without passing the props - just editing your inner Container. It's depends on your codestyle of the project

const Header: FC = ({ children }: PropsWithChildren<unknown>) => {
  return (
    <Container background="blue" height="200px">
      <Content>{children}</Content>
    </Container>
  );
};

export const NewContainer = styled(Container)`
  background: blue;
  height: 200px;
`;

const Header: FC = ({ children }: PropsWithChildren<unknown>) => {
  return (
    <NewContainer>
      <Content>{children}</Content>
    </NewContainer>
  );
};

React native styled components cannot override component's style

1 Answers1