react中使用context进行主题色切换

//left组件
import React, { Component } from 'react';
import Color from '../context/context';

class Left extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        let Color=this.context
        return (
            <div className={Color}>左边</div>
        );
    }
}
Left.contextType=Color

export default Left;

Top.jsx文件

//右边的上导航组件
import React, { Component } from 'react';

class Top extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <>
           
            <div className='top-nav'>上边</div>
           
           
            </>
        );
    }
}

export default Top;

app.css文件页面修饰

.box{
    width: 100%;
    height: 100%;
   display: flex;
}
.box-left{
    width: 190px;
 
    border-right: 1px solid black;
  
}
.box-right{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.box-right-top{
    border-bottom: 1px solid black;
    height: 100px;
}
.box-right-bottom{
    flex: 1;
}

App.jsx

//父组件
import React, { Component } from 'react';
//引入子组件
import Left from './compontent/Left';

import Top from './compontent/Top';
import Ding from './view/Ding';
//引入context对象
import Color from './context/context'
import "./assets/css/app.css"

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {  };
  }
  render() {
    return (
      <>
      <Color.Provider value="dark">
      <div className='box'>
        <div className='box-left'>
          <Left></Left>
          </div>
        <div className='box-right'>
      
          <div className='box-right-top'>
            <Top></Top>
            </div>
          <div className='box-right-bottom'>
            <Ding></Ding>
            </div>
          
        </div>
        
      </div>
      </Color.Provider>
      </>
    );
  }
}


export default App;

view文件夹下的Ding文件

import React, { Component } from 'react';

class Ding extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <>
            <div>
                <span>切换颜色</span>
                <div>
                <button>左菜单 导航 绿色</button></div>
            </div>
           </>
        );
    }
}

export default Ding;

context文件夹下的context.js

//创建context对象
import React from "react"
let Color=React.createContext()
export default Color

index.css全局修饰

* {
  margin: 0;
  padding: 0;
}
html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.dark{
  background-color:green;
}

文件图片

效果图如下：