fix(emotion): fix .extend behaviour using emotion

Closes #29
smooth-code · Sep 8, 2018 · 0eaad36 · 0eaad36
1 parent 6670996
commit 0eaad36
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/docs/advanced/ExtendStyles.mdx b/docs/advanced/ExtendStyles.mdx
@@ -61,6 +61,7 @@ An example of a `BorderedButton` extended from a `Button`:
         border-color: blue;
       }
     `
+
     return (
       <BorderedButton variant="primary">
         A button with border !

diff --git a/src/styled-engine/emotion.js b/src/styled-engine/emotion.js
@@ -53,7 +53,11 @@ export const patchStyledAPI = (StyledComponent, BaseComponent) => {
   Object.defineProperty(StyledComponent, 'extend', {
     get() {
       return (...args) => {
-        const NewStyledComponent = styled(StyledComponent)(...args)
+        const NewStyledComponent = styled(StyledComponent)`
+          &&& {
+            ${css(...args)};
+          }
+        `
         patchStyledAPI(NewStyledComponent, StyledComponent)
         return NewStyledComponent
       }

diff --git a/src/utils/createComponent.js b/src/utils/createComponent.js
@@ -17,7 +17,7 @@ function createComponent(getConfig) {
     render = ({ Component, ...props }) => <Component {...props} />,
     defaultComponent = 'div',
     system = allSystem,
-    applySystem = system => props => ({ '&&&': system(props) }),
+    applySystem = system => props => ({ '&&&&': system(props) }),
     injectTheme,
     InnerComponent: InnerComponentFromConfig,
   } = getConfig()