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

epggiuax 于 2022-12-14 发布在 React

关注(0)|答案(1)|浏览(204)

我有一个奇怪的问题与stlyed组件。我有一个组件标题与基本的风格，但当一个尝试使用这个组件和扩展的风格没有发生。有人能告诉我这是怎么回事？

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

react-native

来源：https://stackoverflow.com/questions/71265344/react-native-styled-components-cannot-override-components-style

1条答案

按热度按时间

lpwwtiir1#

你必须把你的 prop 从传递到你的Header组件中。在Container或Content中。它不会代替你完成。
你的Header是一个React组件，他“不知道该怎么处理”它将从Container-const Container = styled(Header)'...'接收到的 prop 。如果组件与样式一起工作， prop 将被正确识别，如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>
  );
};

赞(0）回复(0）举报 2022-12-14

我来回答

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

1条答案

相关问题

热门标签

最新问答