How to disable inline css styles generated by Gutenberg editor?

I've got Genesis-blocks plugin installed (it got updated from Atomic blocks). I am using blocks and resuable blocks to create pages. The problem I am facing is, most of these blocks inject their own inline styling, e.g. button block creates an anchor tag, but it gives inline styling for background-color and text-color as well.

Doing my own research I found that the default appearance of these blocks can be edited with javascript api, but the docs don't tell which javascript file to use. That is, all this jsx code, where am supposed to put this? Am I supposed to create a new plugin? Obviously js code won't go in functions.php and I don't really think it is going into my theme's main.js file as well because that is going to be loaded for the end user not the wp-admin. The only way I found to do this is somewhat done here: https://developer.wordpress.org/reference/hooks/render_block/ but I need more explanation to this, is render_block triggered every time a block is rendered on the front end? Are $block_content and $block passed by render_block internally?

There's some more documentation that suggest changing theme.json file, but I am using wordpress 5.8, which has version:1 for theme.json file and the docs don't any example on that.

Question: So, can I access similar functions to js api in my functions.php file or if js is the only way, which js file am I supposed to use? Also, is it possible to disable all inline styles generated by the gutenburg block editor and genesis blocks?