Overwrite styles from the outside

[hollandThomas]

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 :)

[JosephBlythe]

I believe you need to use https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion to target another emotion component, sadly we haven't managed to get this working with vue-emotion

[antoinerey]

By any chance, did anyone of you find a way to properly apply style overrides to the Title component? 🙏 😇