Creating a styled component inside a component function
You generally should not to nest your components. Though when the component is small enough, like a one-liner, it's fine to do so.

In your specific case, you can make use of withComponent method to change the tag name of an existing component:

const Heading = styled.h2`
    margin: 0;
    ...lots of css...
`;

const Title = (props) =&gt; {
    const StyledHeading = Heading.withComponent(props.headingLevel || "h2");
    ...
};


You'd still be defining the StyledHeader inside another component, but most of the code would live outside.

Additionally...


I noticed these long lines:

font-weight: ${styleData['typography_settings']['title'][props.typographySize]['weight']};


Looks like this styleData is some sort of theme. I suggest you look into  built-in theming support of styled components before rolling your own.
The variable hasSupplementaryTitle can be eliminated. It's conventional to perform an existence check by just:

if (props.supplementaryTitle) {