DEV Community

loading...

How to use margin in a Styled Component inside Styled Component?

brunovollin profile image BrunoVollin ・1 min read

Margin doesn't work when i have styled component inside styled component in react native. I need that specific way styled(StyledBody).

import React from 'react';
import styled from 'styled-components/native';
import { Text, View } from 'react-native';

export default function HelloWorldApp() {
  return (
    <>
      <StyledBody2>
        <Text>Hello, world!1</Text>
      </StyledBody2>

      <Text>Hello, world!2</Text>
    </>
  );
}

const StyledBody = styled.View`

`;

const StyledBody2 = styled(StyledBody)`
  //it doesn't work
  margin: 20px;
`;

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide