reactjssassstyled-componentsreact-propsreusability

Using a prop in the path of a styled component

I've got a couple of styled-components with paragraphs that use the same exact css-stylings, these stylings come from an imported data object. I'm trying to figure out what would be the best way to be able to re-use these stylings dynamically based on the type of paragraph.

I have a bunch of styles for the paragraphs: title, description, cta, like this :


#title {
 font-family: ${({ cardData }) => cardData?.fonts?.title?.font || 'sans-serif'};
}
#description { 
  font-family: ${({ cardData }) => cardData?.fonts?.description?.font || 'sans-serif'};
}

I feel like something like this should be possible, where I pass the type as a prop and put that into the path directly as a string but i'm missing the right syntax :

font-family: ${({ cardData, type }) => cardData?.fonts?.[type]?.font || 'sans-serif'};

Any help would be greatly appreciated!

Solution

  • I figured it out, for future reference :

    const paragraphStyles = ({ theme, $cardData }: stylePropsT) => {
   const returnStyles = (type: typeStrings): Interpolation<paragraphObject> => css`
      font-family: ${$cardData?.fonts?.[type]?.font || 'sans-serif'};
   `

   return returnStyles
}

const Title = styled.p<stylePropsT>`
   ${(props) => paragraphStyles(props)('title')};
`
const Description = styled.p<stylePropsT>`
   ${(props) => paragraphStyles(props)('description')};
`