仕様

buttonを押すたびに色が変わるというシンプルな処理を実装します

実装

通常

まず基本的な実装方法です

import './App.css';
import {useState} from 'react';

function App() {

    let app_style = {
        position: 'absolute',
        top: '50%',
        left: '50%',
    };

    const initialButtonStyle = {
        color: 'initial',
    };

    const [button_style, setButtonStyle] = useState(initialButtonStyle);

    return (
        <div className="App" style={app_style}>
            通常
            <button style={button_style} onClick={() => setButtonStyle(button_style.color === 'red' ? {color: 'initial'} : {color: 'red'} )}>ボタン</button>
        </div>
    );
}

export default App;

多分こんな感じ？になるかと思います。

いい感じですね

力技

本題の力技の実装方法です

import './App.css';
import {useEffect} from 'react';

function App() {

    let app_style = {
        position: 'absolute',
        top: '50%',
        left: '50%',
    };

    // 👇 scriptを埋め込む処理
    let script = null;

    // 同じscriptが量産されるのを防ぐため同じscriptタグがある場合は処理しない
    if (document.querySelector('#crazy_script') === null) {
        script = document.createElement('script');
        script.id = 'crazy_script';

        // innerHTMLでやりたい内容を書く
        script.innerHTML = `
            let button = document.getElementById('button');
            button.addEventListener('click', function (e) {
                console.log('力技'); // 👈ちゃんと反応してるかデバッグ
                if (this.style.color !== 'initial') {
                    this.style.color = 'initial';
                } else {
                    this.style.color = 'red';
                }
            });
        `;
    }

    // reactのレンダリング後にscriptを埋め込みたいのでuseEffectで埋め込む
    useEffect(() => {
        if (script !== null) {
            document.body.appendChild(script);
        }
    })

    return (
        <div className="App" style={app_style}>
            力技
            <button style={{color: 'initial'}} id="button">ボタン</button>
        </div>
    );
}

export default App;

react使う意味ないですやん的なコードですが、こんな感じでscriptタグを無理やり埋め込んで実行することができます。