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

Question

Я пытаюсь понять, как эта штука работает, но все примеры, которые я нашел, были написаны классным способом.

   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" />
         )
   }

Мне просто нужен доступ к моим пользовательским атрибутам в стиле MyTag. Я использовал (props) => {title: props.MyThing } в .attrs (), но не работал.

Answer 1

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

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