Как передать пользовательский атрибут стилизованному компоненту в функциональном компоненте?

Вы будете создавать функции для отдельных атрибутов, а не для всего параметра attrs. Например:

   const MyTag = styled.Button.attrs({
     title: (props) => props.myThisThing
   })`
     background: ${props => props.thisIsAlsoMyThing}
   `

вы могли бы использовать что-то вроде этого

interface Props {
  disabled?: boolean;
}

interface Attrs {
  href?: string;
}

const Link = styled.a.attrs(({ href = "#" }: Attrs) => ({
  href,
  onClickCapture: (event: any) => event.preventDefault()
}))`
  color: ${({ disabled = false }: Props) => (disabled ? "#eee" : "initial")};
`;

а затем использовать его

<Link href = "http://google.com" target = {"_blank"}>
   Click here
</Link>

У меня есть проблема с другой версией стилизованного компонента:/

это должно работать:

Версия JavaScript:

export const MyTag = styled.button.attrs(props => ({
  title: props.myThisThingValue,
}))`
  background: ${props => props.thisIsAlsoMyThing};
`;

Версия TypeScript:

interface MyTagProps {
  myThisThingValue: string;
  thisIsAlsoMyThing: string;
}

export const MyTag = styled.button.attrs((props: MyTagProps) => ({
  title: props.myThisThingValue,
}))<MyTagProps>`
  background: ${props => props.thisIsAlsoMyThing};
`;

Используй это:

<MyTag myThisThingValue = "My value" thisIsAlsoMyThing = "red" />

В этом случае title — это defined attribute, но если вам нужен атрибут данных, такой как indexNumber (атрибут не определен), вам нужно будет использовать префикс data-*:

export const TagName = styled.button.attrs((props) => {
  return {
    data-indexNumber: "indexNumber value"
  };
})``;

Использование атрибутов данных