btnClass working

Author: larmax

.DS_Store

@@ -1,12 +1,13 @@
 import React from 'react';
 import styles from './Cockpit.module.css';
+import Aux from '../../hoc/Aux';
 const cockpit = (props) => {
 
   const assignedClasses = [];
-  let btnClass = '';
+  let btnClass = styles.Button;
   if(props.showPersons){
 
-    btnClass = styles.Button;
+
     console.log('btnclass',    btnClass);
     if (props.showPersons) {
 
@@ -25,14 +26,14 @@ const cockpit = (props) => {
   }
 
   return(
-    <div>
+    <Aux>
     <h1>tekstiä</h1>
     <p className={assignedClasses.join(' ')}>lisää tekstiä</p>
 
     <button
     className={btnClass}
-    onClick={props.clicked}>Toggle Persons</button>
-    </div>
+    onClick={props.clicked}> Toggle Persons </button>
+    </Aux>
   )
 };
 export default cockpit;

firstapp/src/Components/Cockpit/Cockpit.js

@@ -7,7 +7,7 @@
     font-weight: bold;
   }
 
-  .Button button {
+  .Button {
     border: 1px solid blue;
     padding: 16px;
     background-color: green;
@@ -16,16 +16,16 @@
     cursor: pointer;
   }
 
-  .Button button:hover {
+  .Button:hover {
     background-color: lightgreen;
     color: black;
   }
 
-  .Button button.Red {
+  .Button.Red {
     background-color: red;
   }
 
-  .Button button.Red:hover {
+  .Button.Red:hover {
     background-color: salmon;
     color: black;
   }