问在React中单击时，元素的样式不会更改

EN

import { getByPlaceholderText } from '@testing-library/dom';
import React from 'react';
import {Component} from 'react';
import Element from '../Element/Element'


            class Element extends Component{   // element who has the eventLister click
               render(){
            return <div onClick = {this.props.func} style = {this.props.style}> 
                    HELLO 
                   </div>
                   }
                 }


   class UserInput extends Component{     // here in UserInput I am  returning "Element" above 
                                          // and i am sending the event handler and style as  
                                          //  props
        style = {
        color:'red',
        fontSize:'40px'

         }
       func2=()=>{
          this.style = ({
          color:'black',
      
      });
       console.log('clicked')
       console.log(this.style);
   
 }


render(){ 
    return < Element func = {this.func2.bind(this)} style= {this.style}/>  
}

      export  default UserInput;