通过样式化组件将样式扩展到子组件

Question

我有一个名为

Label

的子组件。我希望父组件通过扩展样式来添加更多样式，我遵循了一些文档来执行此操作，但它不起作用。

这是一个反应本机 CLI 应用程序。

标签.tsx

import React from 'react';
import { Text } from 'react-native';
import styled from 'styled-components';
import Colors from '../ui/colors';

type Props = {
  color?: string;
  children: React.ReactNode;
  className?: string;
};

export const Label: React.FC<Props> = ({ color, children, className }) => {
  return (
    <StyledText color={color} className={className}>
      {children}
    </StyledText>
  );
};

const StyledText = styled(Text)<Props>`
  color: ${(props) => (props?.color ? props.color : Colors.textColor)};
  font-size: 16px;
  font-family: Poppins-SemiBold;
`;

Parent.tsx

import React from 'react';
import Layout from '../../ui/layouts/Layout';
import styled from 'styled-components';
import { Label, Line } from '../../design-system';


const Parent = () => {
  return (
    <Layout>
      <StyledLabel>Some random text</StyledLabel>
      <Line />
    </Layout>
  );
};

const StyledLabel = styled(Label)`
  margin: 30px;
  background-color: red;
`;

export default Parent;

Answer 1

我通过共享相同的代码向chatGPT询问了该问题。所以我需要使用

style

属性而不是

className

，因为它是一个反应原生应用程序，而不是 React.js。这是更新后的

Label

组件。

import React from 'react';
import { Text, TextStyle } from 'react-native';
import styled from 'styled-components/native'; // Use styled-components/native for React Native
import Colors from '../ui/colors';

type Props = {
  color?: string;
  children: React.ReactNode;
  style?: TextStyle;
};

export const Label: React.FC<Props> = ({ color, children, style }) => {
  return (
    <StyledText color={color} style={style}>
      {children}
    </StyledText>
  );
};

const StyledText = styled(Text)<Props>`
  color: ${(props) => (props?.color ? props.color : Colors.textColor)};
  font-size: 16px;
  font-family: Poppins-SemiBold;
`;