MathJax 3: Change css styles

MathJax 3 loads some inline CSS like

mjx-container[jax="CHTML"][display="true"] {
  display: block;
  text-align: center;
  margin: 1em 0;
}

Let's say I want no margins, then I can add to my stylesheet:

mjx-container[jax="CHTML"][display="true"] {
  margin: 0 !important;
}

Is there a better solution for the above example? Can I modify the styles in the config (window.MathJax = {}), so that the loaded inline styles are the correct ones and don't have to be overwritten?

You can use

<script>
MathJax = {
  startup: {
    ready() {
      var CHTMLmath = MathJax._.output.chtml.Wrappers.math.CHTMLmath;
      delete CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin;
      MathJax.startup.defaultReady();
    }
  }
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

Above
$$\text{Math Display}$$
Below

to remove the margin setting. Or you can set the margin explicitly with

      CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin = '0';

I think that should do the trick for you.