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

不能使用样式化组件将样式应用于React Native中的自定义组件吗？

1 个答案: