How to pass custom attribute to a styled component in a functional component?

Question

I'm trying to understand how this thing works, but all examples that I found was written in a class fashion.

   import React from 'react'
   import styled from 'styled-components/native'

   const MyTag = styled.Button.attrs({
     title: myThisThingValue
   })`
     // some style
     background: thisIsAlsoMyThingValue
   \` 

   export default function MyComponent({ props }) {
     return(
       <MyTag myThisThing="My value" thisIsAlsoMyThing="Other Value" />
         )
   }

I'm just want access to my custom attributes in the MyTag styled. I used a (props) => {title: props.MyThing } in .attrs() but didn't work.

Answer 1

that should work:

JavaScript Version:

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

TypeScript Version:

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

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

Use it:

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

Answer 2

In this case title is a defined attribute, but if you need a data attribute like indexNumber (not defined attribute) you will need to use the prefix data-*:

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

Using data attributes