样式组件的导出位置

Question

突然想知道地点了。您在哪里放置和使用 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

不同的项目使用不同的风格，我认为没有一个正确的答案。你也可以这样做：

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

export default () => {
  return <Title>hello world</Title>;    
};

const Title = styled.h1`                
`;

Answer 2

正如@max-yankov 所指出的，有许多不同的方法可以做到这一点，类似于 React 项目的文件夹结构。对于您自己的项目，我建议您始终使用相同的方法来实现一致的应用程序构建。如果您在一家公司工作或与一个项目团队一起工作，通常总会有一个风格指南来设定规则。

但是，您必须自己决定在那里使用什么，因为在 90% 的情况下，这只是个人偏好的决定，并没有提供功能优势或劣势。

例如，在使用 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;
  }
`;

样式组件的导出位置

export place of styled component

reactjs

styled-components