React 本机样式的组件无法覆盖组件的样式

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

Answer 1

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