React 原生样式的组件无法覆盖组件的样式

Question

我对stlyed组件有一个奇怪的问题。我有一个具有基本样式的组件Header，但当尝试使用此组件并扩展样式时，不会发生任何事情。有人能告诉我发生了什么事吗？

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

您必须将道具从传递到Header组件中。在CCD_ 2或CCD_。不会代替你做的。

你的CCD_ 4是React组件；不知道该怎么办"；具有将从CCD_ 5到CCD_ 6接收的道具。如果组件使用样式(如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>
);
};

或者你有两个下一个选项，不需要传递道具——只需编辑你的内部容器。这取决于你的项目的代码风格

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