我最近开始将样式化组件与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 };
...但那似乎不起作用。
您可以这样做的一种方法是使用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;
`;
