export place of styled component

Question

Suddenly I was wondering about the location. Where do you place and use EXPORT?

import React from 'react';
import styled from 'styled-components';         

const App = () => {
  return <Title>hello world</Title>;    
};

export default App;  // 1

const Title = styled.h1`                
`; 

export default App;  // 2

Answer 1

As @max-yankov noted, there are many different ways to do this similar to the folder structure of a React project. For your own projects, I would recommend that you always use the same methodology to implement a consistent app build. If you are working for a company or with a team on a project, there is usually always a style guide that sets the rules.

However, you'll have to decide for yourself what exactly you use there, as in 90% of cases it's simply a decision of personal preference and offers no functional advantages or disadvantages.

For example, I prefer the following when working with styled-components:

interface Props {}

export const LoginPage = memo((props: Props) => {
  return (
    <>
      <Wrapper>
        <Title>Just my preference</Title>
      </Helmet>
    </>
  );
});

const Wrapper = styled.div`
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 320px;
`;

const Title = styled.div`
  margin-top: -8vh;
  font-weight: bold;
  color: black;
  font-size: 3.375rem;

  span {
    font-size: 3.125rem;
  }
`;