加颜色

src/components/Square.js

-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import styles from './square.css';
 
 class Square extends Component {
   render() {
-    return <div className={styles.square} onClick={this.props.onClick}><span className={styles.squareVal}>{this.props.value}</span></div>;
+    const value = this.props.value;
+    // const blue = Object.assign({}, styles.blue, styles.square);
+    console.log(styles.blue)
+    return <div className={`${styles.square} ${value === 'x' ?  styles.blue: value === 'o' ? styles.red : styles.default}`} onClick={this.props.onClick}><span className={styles.squareVal}>{this.props.value}</span></div>;
   }
 }
 export default Square;

src/components/square.css

@@ -10,7 +10,15 @@
   text-align: center;
   position: relative;
 }
-
+.blue {
+  background-color: lightblue;
+}
+.red {
+  background-color: lightpink;
+}
+.default {
+  margin: 0;
+}
 .squareVal {
   position: absolute;
   left: 50%;

src/routes/Container.js

@@ -48,7 +48,6 @@ function Container({ dispatch, con }) {
                     winner: arr[a]
                   }
                 })
-                alert(`赢了~~`)
               }
             }
             return winner;
@@ -117,7 +116,7 @@ function Container({ dispatch, con }) {
       title: '步数',
       key: 'step',
       dataIndex: 'step',
-      render: (text, records, index) => <div className={styles.step} onClick={() => recall(records, index)}>{text}</div>
+      render: (text, records, index) => <Button className={styles.step} onClick={() => recall(records, index)}>{text}</Button>
     },
     {
       title: '坐标',
@@ -126,6 +125,7 @@ function Container({ dispatch, con }) {
     }
   ]
   const chessArr = step === 0 ? new Array(9).fill(null) : record[step - 1].records;
+
   return (
     <div className={styles.container}>
       <div className={styles.normal}>