Не можете применить стили к пользовательским компонентам в React Native, используя styled-компоненты? - PullRequest
Новая
       7

Не можете применить стили к пользовательским компонентам в React Native, используя styled-компоненты?

0 голосов
/ 27 марта 2020

Я использую styled-components в своем приложении React Native для стилизации. Стилизация отлично работает с другими компонентами, но когда я пытаюсь стилизовать свои созданные пользователем компоненты, стиль не применяется.

В этом случае не применяется заполнение.

Вот один из моих примеров кода : 

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

1 Ответ

2 голосов
/ 27 марта 2020

Попробуйте использовать стиль в компоненте BigTitle : 

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