CODEWITHSUNDEEP
cssreactjsreact-nativefrontendstyled-components
Musayyab Naveed
Musayyab Naveed

Reputation: 365

Can not apply styles to custom components in React Native using styled-components?

I'm using styled-components in my React Native app to style it. Styling works fine on other components but when I try to style my custom created components then no style is applied.

In this case, no padding is applied.

Here is one of my code example:

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

Here is the custom created component:


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

Upvotes: 2

Views: 2658

Answers (1)

Luan Eduardo
Luan Eduardo

Reputation: 416

Try to use the style prop in the BigTitle component:

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

Upvotes: 7

Related Questions