Imagine a title

const StyledTitle = styled('div')`
  color: cornflowerblue;
`;

that is used in a template and exported as a component Title:

<template>
  <StyledTitle>
    I am a title
  </StyledTitle>
</template>

Now, when overwriting the StyledTitle, it works as expected. It's color changes from blue to red:

const OverwrittenStyledTitle = styled(StyledTitle)`
  color: crimson;
`;

Although when overwriting the Title, it keeps it's original blue color and does not become green:

const OverwrittenTitle = styled(Title)`
  color: forestgreen;
`;

Is this expected behavior? In such instances, is it the "correct" approach to style via props (e.g. a prop type: 'main' | 'secondary, ...). Or is this a bug?
Also, I am not sure if this is related to either vue-emotion or emotion. So pardon me if this has nothing to do with vue-emotion.

Thank you for your time :)