[제안] `css` prop 추가

[drakang4]

컴포넌트 스타일링의 유연성을 제공하기 위한 css prop을 추가해보면 어떨까 합니다. 모든 컴포넌트에 최소한의 API만 표면에 노출시켜서 유연한 커스터마이징이 가능한 디자인 시스템 구현을 달성해보는 목적입니다.

why

• 너무 많은 스타일 prop들은 컴포넌트 내부를 복잡하게 만듭니다.
• prop으로 변경할 수 없었던 다른 스타일 변경이 필요할 때 마다 업데이트가 필요합니다.
• 스타일 prop들이 늘어날 수록 컴포넌트 사용에 대한 러닝 커브가 증가합니다.

예시: https://codesandbox.io/s/silent-fast-ngmy8

• https://emotion.sh/docs/css-prop 에서 아이디어를 따왔습니다.
• babel 컨픽 변경이 필요하지 않습니다.
• 인라인 스타일이 아니고 styled-components로 생성되는 css이므로 nesting 이나 가상 선택자, 가상 엘리먼트를 사용할 수 있습니다.

[giwan-dev]

저는 완전 찬성입니다! props는 UI의 기능에만 집중하고, 스타일링은 css로 관리하는 패턴도 가능하겠네요.

컴포넌트가 nesting 되어있을 때 내부 컴포넌트의 스타일을 바꾸기 위해 prop을 추가하는 일이 있을 것 같아요. 개인적으로 이런 것은 부모에서 결정하도록 바꾸는 게 좋을 것 같은데 어떻게 생각하시나요?

예를 들어 POI 목록 요소 컴포넌트의 스크랩 버튼 스타일이 변동된다면, POIListElement에 scrapButtonCss prop을 추가하는 게 아니라 scrapButton prop을 추가해서 스크랩 버튼의 스타일을 통째로 부모에게 위임하는 것이죠.

<POIListElement scrapButtonCss={{ /* */ }} />
// 이게 아니라

<POIListElement scrapButton={<ScrapButton />} />
// 이렇게

구체적인 고민은 현실 세계에서 하더라도 스타일 변경을 위한 props을 최대한 넣지 말자는 컨벤션을 가지면 어떨까 싶습니다.

[dddeok]

저도 우디 의견에 찬성합니다. 간단한 CSS 변경으로 인한 사이클이 길어질때도 많았고, 불편한 부분 이있었던 부분을 해소 시킬 수 있을거 같습니다. 하지만 다소 걱정 되는 부분은 공통 모듈에 대한 의미가 희미 해질 수 도 있다고 생각이 드는데, 그부분은 우디가 제시해주신 부분 처럼 내부적인 컨벤션 룰을 통해 해소가 될 수 있을 거같습니다.

[drakang4]

@zprime0920 저도 두 개 놓고 보면 후자 방법이 더 나아 보이네요.

[drakang4]

요즘 다른 컴포넌트 라이브러리에서는 sx prop 이라고 theme에 직접적으로 접근할 수 있는 컨셉을 쓰기도 합니다.

• https://mui.com/system/getting-started/the-sx-prop/
• https://chakra-ui.com/docs/styled-system/the-sx-prop
• https://mantine.dev/styles/sx/
• https://theme-ui.com/sx-prop/