无法使用 styled-components 将样式应用于 React Native 中的自定义组件？

Question

我在我的 React Native 应用程序中使用 styled-components 来设置它的样式。样式在其他组件上效果很好，但是当我尝试为自定义创建的组件设置样式时，没有应用任何样式。

在这种情况下，不应用填充。

这是我的代码示例之一：

import React, { Component } from "react";
import { View } from "react-native";
import styled from "styled-components/native";
import { BigTitle } from "./Titles";

class Home extends Component {
  render() {
    return (
      <View>
        <MainTitle title="Hello World!" />
      </View>
    );
  }
}
export default Home;

const MainTitle = styled(BigTitle)`
  padding-top: 45px;
  padding-bottom: 10px;
`;

这是自定义创建的组件：

import React from "react";
import { Text } from "react-native";
import styled from "styled-components/native";

interface TitleProps {
  title: string;
}

export const BigTitle = (props: TitleProps) => {
  return <BigTitleText>{props.title}</BigTitleText>;
};

const BigTitleText = styled(Text)`
  text-align: left;
  font-size: 20px;
  letter-spacing: 1.8px;
  color: ${props => props.theme.textColor};
  font-family: ${props => props.theme.fontFamily};
  text-transform: uppercase;
  opacity: 1;
`;

Answer 1

尝试在 BigTitle 组件中使用 style 属性：

export const BigTitle = (props: TitleProps) => {
  return <BigTitleText style={props.style}>{props.title}</BigTitleText>;
};