Experimented with styled component.

package.json

@@ -10,7 +10,8 @@
     "react-motion": "^0.5.0",
     "react-redux": "^5.0.5",
     "react-router-dom": "4.1.1",
-    "redux": "^3.7.0"
+    "redux": "^3.7.0",
+    "styled-components": "^2.1.0"
   },
   "devDependencies": {
     "enzyme": "^2.8.2",
@@ -39,4 +40,4 @@
       "git add"
     ]
   }
-}
+}

src/__test__/Modal.test.js

@@ -1,19 +1,21 @@
 import React from 'react';
 import Modal from '../components/Modal/Modal';
+import { ModalWrapper, ModalButton } from '../components/Modal/style.js';
+
 import { mount, shallow } from 'enzyme';
 
 describe('<Modal />', () => {
   it('Clicking show button shows a new node with class named "modal"', () => {
     const modal = mount(<Modal />);
-    expect(modal.find('.modal').exists()).toBe(false);
+    expect(modal.find(ModalWrapper).exists()).toBe(false);
     modal.find('button.show').simulate('click');
-    expect(modal.find('.modal').exists()).toBe(true);
+    expect(modal.find(ModalWrapper).exists()).toBe(true);
   });
 
   it('Clicking the close button close the modal window and make the class inactive', () => {
     const modal = mount(<Modal />);
     modal.find('button.show').simulate('click');
-    modal.find('button.hide').simulate('click');
-    expect(modal.find('.modal').exists()).toBe(false);
+    modal.find(ModalButton).simulate('click');
+    expect(modal.find(ModalWrapper).exists()).toBe(false);
   });
 });

src/components/Modal/Modal.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import './style.css';
+import { ModalWrapper, ModalPara, ModalButton } from './style.js';
 
 const ModalWindow = ({ isActive, handleClickClose }) => {
   if (isActive) {
     return (
-      <div className={'modal'}>
-        <button className="hide" onClick={handleClickClose}>X</button>
-        <p>
+      <ModalWrapper>
+        <ModalButton onClick={handleClickClose}>X</ModalButton>
+        <ModalPara>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -16,13 +16,15 @@ const ModalWindow = ({ isActive, handleClickClose }) => {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </div>
+        </ModalPara>
+      </ModalWrapper>
     );
   }
   return null;
 };
 
+ModalWindow.displayName = 'ModalWindow';
+
 ModalWindow.PropTypes = {
   isActive: PropTypes.bool.isRequired,
   handleClickClose: PropTypes.func.isRequired

src/components/Modal/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Modal from './Modal';
 import SharedTitle from '../Utils/SharedTitle.jsx';
 
-import './style.css';
+// import './style.css';
 
 const ModalDemo = () =>
   <div>

src/components/Modal/style.css

@@ -1,4 +1,6 @@
-.modal {
+import styled from 'styled-components';
+
+const ModalWrapper = styled.div`
 	display: block;
 	position: absolute;
 	top: 0;
@@ -10,22 +12,22 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-}
+`;
 
-.modal p {
+const ModalPara = styled.p`
 	width: 90vw;
 	background-color: #fff;
 	padding: 10px;
-}
 
-@media screen and (min-width: 600px) {
-	.modal p {
+  @media screen and (min-width: 600px) {
 		width: 40vw;
 	}
-	
-}
-button.hide {
+`;
+
+const ModalButton = styled.button`
 	position: fixed;
 	right: 20px;
 	top: 20px;
-}
+`;
+
+export { ModalWrapper, ModalPara, ModalButton };