안녕하세요

안녕하세요, 이것은 첫 번째 블로그/기사 게시물입니다. Awwwards에 있을 가치가 있는 웹사이트/앱을 구축하기 위한 여정, 그 과정에서 배운 것, 그리고 흥미롭고 원하는 모든 것을 게시할 것입니다. 공유합니다. 피드백은 항상 감사합니다. 내 문법에 대해 자유롭게 그릴 수 있습니다 :P

스타일이 지정된 구성 요소를 작성하는 다양한 방법

이것은 내 React 프로젝트에서 Styled Components를 사용할 때 만난 몇 가지 다른 방법일 뿐입니다. 당신이 가장 좋아하는 것 또는 당신이 발견하고 사용하면서 즐겼던 다른 방법을 알려주십시오. (저는 현재 스타일 3을 사용하고 있습니다)

스타일 1 - 표준

// Component/styles.js
const FlexWrapper = styled.div`
  ...
`

const Item = styled.span`
  display: flex;
  align-items: center;
`;

const ButtonPadding = styled.div`
    padding: 0 1rem;
`

export { FlexWrapper , Item, ButtonPadding  };

// Component/index.js

import { FlexWrapper, Item } from './styles.js' // how I import and then use the styled components

스타일이 지정된 구성 요소는 스타일 지정이 필요한 모든 요소에 대해 생성됩니다. React와 Styled Components를 처음 시작할 때 이 스타일을 사용했습니다.

스타일 2

//Component/styles.js
const Wrapper= styled.div`
  display: flex;
  font-size: 14px;
  margin-top: 36px;
  align-items: center;

  .button {
     padding: 0 1rem;
  }

  a {
    text-decoration: none;
    cursor: pointer;
  }

  .breadcrumb-icon {
    margin: 0 8px;
  }

  .icon-inner {
    // ...
  }
`;

//Component/index.js

// ...
return <>
    <Wrapper>
         <a>Item 1 <img className="breadcrumb-icon"/></a>
         // ...
    </Wrapper>
</>

우리는 만들고 있는 구성 요소를 포함하는 하나의 래퍼/컨테이너 구성 요소를 정의했으며 거기에서 html 요소만 대상으로 지정했습니다. 이렇게 하면 스타일 지정이 필요한 모든 요소에 대해 Styled Component를 만들 필요가 없습니다.

스타일 3

// Tabs/styleds.js
// ...
export { Tabs, RightSide, Bar };

// Tabs/index.js
import * as S from './styles';
// ...
return (
      <S.Tabs>
        <S.Bar>
          <TabStrip onSelect={onSelect} tabs={mappedTabs} />
          <S.RightSide>
            <S.RightSide>{rightSide}</S.RightSide>
          </S.RightSide>
        </S.Bar>
        {selectedTab && selectedTab.props.children}
      </S.Tabs>
    );

이 접근 방식이 마음에 드는 것 중 하나는 React 구성 요소와 Styled 구성 요소를 구분하기가 매우 쉽기 때문에 생성할 때마다 모든 새로운 Styled 구성 요소를 가져올 필요가 없다는 것입니다. 이 오픈 소스 프로젝트https://github.com/kitze/JSUI
를 보다가 이것을 발견했습니다.

다른 사람들이 무엇을 사용하고 있는지 듣고 싶으므로 알려주세요. :)