babel-plugin-styled-components icon indicating copy to clipboard operation
babel-plugin-styled-components copied to clipboard

Bug with custom default import name + component selector

Open quantizor opened this issue 6 years ago • 1 comments

import React from 'react';
import { create as render } from 'react-test-renderer';
import styledSc, { ThemeProvider } from 'styled-components';

const Ancestor = styledSc.div`
  color: red;
`;

const Child = styledSc.div`
  background-color: ${p => p.theme.backgroundColor};
  font-size: ${p => p.fontSize}px;
`;

const Parent = styledSc.div`
  border: 1px solid ${p => p.theme.borderColor};
  color: ${p => p.color};

  ${Child} {
    font-family: monospace;
  }
`;

const theme = {
  backgroundColor: 'cornflowerblue',
  borderColor: 'antiquewhite',
};

const themeVariant = {
  backgroundColor: 'mistyrose',
  borderColor: 'gainsboro',
};

const getVariant = useVariant => (
  <ThemeProvider theme={useVariant ? themeVariant : theme}>
    <Ancestor>
      <Parent color={useVariant ? 'red' : 'black'}>
        <Child fontSize={useVariant ? 10 : 12} />
      </Parent>
    </Ancestor>
  </ThemeProvider>
);

const instance = render(getVariant());

Results in the error "TypeError: Cannot call a class as a function".

Changing styledSc to styled makes the error go away.

quantizor avatar Aug 20 '17 03:08 quantizor

A dang, I had that fixed for a while but it seems like that code went missing somewhere!

mxstbr avatar Aug 20 '17 05:08 mxstbr