emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.33k stars 1.1k forks source link

Conflicting theme prop in styled component #3127

Open thisisauniquegithubusername opened 8 months ago

thisisauniquegithubusername commented 8 months ago

Current behavior:

If a component with a theme prop is styled, the theme prop can no longer be used

To reproduce: https://codesandbox.io/p/sandbox/crazy-leaf-jfykrj?file=%2Fsrc%2FEditor.tsx

const StyledEditor = styled(CodeMirror)``;

function Editor({ input }) {
  return (
    <div>
      <StyledEditor
        value={input}
        theme={dracula}
      />
      <CodeMirror
        value={input}
        theme={dracula}
      />
    </div>
  );
}

Expected behavior:

There should be some workaround to use the theme prop. Right now there is an error trying to build the code locally and in codesandbox the theme is not applied

Environment information:

nickpoindexter commented 7 months ago

+1 I also have this issue