Emotion: styled doesn't works with imported styled React component without className prop.

[amel-true]

• emotion version: 7.0.12
• react version: 15.6.1

Problem description:

I try to rewrite some code from styled-components to emotion
But
src/components/Island.js

import React from 'react';
import styled from 'emotion/react';
const IslandLayout = styled.div`
 margin: 15px;
 border-radius: 4px;
 background: #fff;
 box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
`;
const Island = ({children}) => (
 <IslandLayout>
  {children}
 </IslandLayout>
);
export default Island;

src/App.js

import React, { Component } from 'react';
import styled from 'emotion/react'
import Island from './components/Island';
const MyIsland = styled(Island)`
 padding: 10px;
`;
class App extends Component {
 render() {
  return (
       <MyIsland>test</MyIsland>
  );
 }
}
export default App;

Does not work. MyIsland has styles like this:

margin: 15px;
border-radius: 4px;
background: #fff;
-webkit-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);

But i can’t see padding: 10px;
It works only if i adding className property to Island

const Island = ({children, className}) => (
 <IslandLayout className={className}>
  {children}
 </IslandLayout>
);

[thangngoc89]

styled component simply generate and pass the className to the wrapped component so your component need to accept className props.

Btw, you can simplify your code like this:

import React from 'react';
import styled from 'emotion/react';

const Island = styled.div`
 margin: 15px;
 border-radius: 4px;
 background: #fff;
 box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
`;

export default Island;

[amel-true]

I couldn't find it in documentation. For example styled components works well without className

Btw, you can simplify your code like this:

I know, but i have more complicated components.

[thangngoc89]

@amel-true you can read styled component source here. It's 97 LoCs. https://github.com/tkh44/emotion/blob/19ce8b21a4bea12d9ec081b70bf2bded90a9d0fa/src/react/index.js

[mitchellhamilton]

I'm not sure how it works for you in styled-components. Here's an example with styled-components and it doesn't work without passing the className prop. styled-components talks about this in their docs

We have a code example on our website mentioning it but we could have better docs for it.

[amel-true]

Oh, sorry, my mistake.