Accept objects as className in styled components (they are stringif…

…ied) to match React behavior * Accept objects as className in styled components * PR feedback - change to else if * PR Feedback - change condition * PR feedback - fix other test * Update .changeset/afraid-dolls-speak.md Co-Authored-By: Mateusz Burzyński <mateuszburzynski@gmail.com> * Update .changeset/afraid-dolls-speak.md Co-Authored-By: Mateusz Burzyński <mateuszburzynski@gmail.com> * Update .changeset/afraid-dolls-speak.md Co-Authored-By: Mateusz Burzyński <mateuszburzynski@gmail.com>
emotion-js · Oct 11, 2019 · c3f0bc1 · c3f0bc1
1 parent a07f8a7
commit c3f0bc1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 1 deletion.
diff --git a/.changeset/afraid-dolls-speak.md b/.changeset/afraid-dolls-speak.md
@@ -0,0 +1,6 @@
+---
+'@emotion/styled-base': patch
+'@emotion/styled': patch
+---
+
+Accept objects as `className` in styled components (they are stringified) to match React behavior
diff --git a/packages/styled-base/src/index.js b/packages/styled-base/src/index.js
@@ -105,7 +105,10 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
                 classInterpolations,
                 props.className
               )
+            } else if (props.className != null) {
+              className += `${props.className} `
             }
+
             const serialized = serializeStyles(
               styles.concat(classInterpolations),
               context.registered,

diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -404,6 +404,12 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
 </SomeCustomLink>
 `;
 
+exports[`styled object as className 1`] = `
+<div
+  className="myclass emotion-0"
+/>
+`;
+
 exports[`styled object as style 1`] = `
 .emotion-0 {
   font-size: 20px;

diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
@@ -63,6 +63,15 @@ describe('styled', () => {
     expect(tree).toMatchSnapshot()
   })
 
+  test('object as className', () => {
+    const myclass = { toString: () => 'myclass' }
+    const Comp = styled.div``
+
+    const tree = renderer.create(<Comp className={myclass} />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
   test('glamorous style api & composition', () => {
     const H1 = styled.h1(props => ({ fontSize: props.fontSize }))
     const H2 = styled(H1)(props => ({ flex: props.flex }), { display: 'flex' })
@@ -392,7 +401,7 @@ describe('styled', () => {
     const tree = renderer
       .create(
         <Button
-          className={css({
+          css={css({
             '&:hover': {
               color: 'pink',
               '&:active': {