diff --git a/README.md b/README.md
index d78f421..6bc6379 100644
--- a/README.md
+++ b/README.md
@@ -78,14 +78,14 @@ class App extends React.Component {
           }}
         >
           {({ small, medium }) => (
-            <div>
-              <p>This always shows.</p>
-              small && (
-                <p>The document is at least 300px wide.</p>
-              )
-              medium && (
-                <p>The document is at least 600px wide.</p>
-              )
+            <div
+              className={[
+                (small ? 'hello' : ''),
+                (medium ? 'goodbye' : ''),
+              ].join(' ')}
+            >
+              At 300px wide, I have a `className` of `hello`. At 600px wide,
+              I have a `className` of `hello goodbye`.
             </div>
           )}
         </Media>
diff --git a/modules/__tests__/Media-test.js b/modules/__tests__/Media-test.js
index e1ab3ef..ecf3dff 100644
--- a/modules/__tests__/Media-test.js
+++ b/modules/__tests__/Media-test.js
@@ -102,21 +102,23 @@ describe('A <Media>', () => {
         const element = (
           <Media queries={queries}>
             {({ sm, md }) => (
-              <div>
-                {md && 'goodbye'}
-                {sm && 'hello'}
-              </div>
+              <div
+                className={[
+                  (md ? 'goodbye' : ''),
+                  (sm ? 'hello' : ''),
+                ].join(' ')}
+              />
             )}
           </Media>
         )
 
         render(element, node, () => {
-          expect(node.firstChild.innerHTML).toMatch(/hello/)
+          expect(node.firstChild.classList.contains('hello')).toBe(true)
+          expect(node.firstChild.classList.contains('goodbye')).toBe(false)
         })
       })
     })
 
-
   })
 
   describe('with a query that does not match', () => {