Styled-Components&React:如何避免杂乱？

Question

我最近开始将样式化组件与React一起使用，我不确定我是否正确地处理了一个不断重复出现的特定情况。

假设我有一个非常简单的组件，比如label，它只需要非常多的样式和一些给定的内容。我现在要处理的事情如下：

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

export type Props = {...};

export const Impl = styled.span`
  display: inline-block;
  padding: 0 4px;
  ...
`;

export const Label: React.FC<Props> = ({ text }) => <Impl>{ text }</Impl>;

我发现首先定义基本组件，如impl，只针对样式，然后再定义另一个组件，它接受道具并使用该样式组件。

有没有更短的方法只在一个组件中完成这两个任务？我希望能有一些像...

export const Label = styled.span<Props>=`
  ...styles...
`({ label }) = { label };

...但那似乎不起作用。

Answer 1

您可以这样做的一种方法是使用styled工厂并只内联您的组件--尽管这种关系相反，因为您不是使用styled.span，而是只通过styled-components生成的classname来设计您自己的组件。这也意味着您需要在道具的类型中包含classname，或者使用实用工具类型来添加它。

type Props = {
  text: string;
  className?: string;
};

const Label = styled(({ text, className }: Props) => (
  <span className={className}>{text}</span>
))`
  display: inline-block;
  padding: 0 4px;
  color: red;
`;

export default function App() {
  return (
    <>
      <Label text="foo" />
    </>
  );
}

您还可能更喜欢以下内容：

const Label = styled(({ text, ...props }: Props) => (
  <span {...props}>{text}</span>
))`
  display: inline-block;
  padding: 0 4px;
  color: red;
`;

或使用实用工具类型：

type SCP<T> = T & { className?: string };

type Props = {
  text: string;
};

const Label = styled(({ text, ...props }: SCP<Props>) => (
  <span {...props}>{text}</span>
))`
  display: inline-block;
  padding: 0 4px;
  color: red;
`;