Inline math not rendering correct

[thejozika]

I am using the following logic to generate my html from a markdown string for a browser editor with preview.

  useEffect(() => {
    unified()
      .use(remarkParse)
      //.use(remarkGfm)
      .use(remarkMath,{singleDollarTextMath:true})
      .use(remarkRehype)
      .use(rehypeSanitize, {
        ...defaultSchema,
        attributes: {
          ...defaultSchema.attributes,
          // The `language-*` regex is allowed by default.
          code: [["className", /^language-./, "math-inline", "math-display"]],
        },
      })
      .use(rehypeMathJax)
      .use(rehypeStringify)
      .process(rawText)
      .then((processedContent) => {
        setInnerHtml(processedContent.toString());
      });
  }, [rawText]);

To render the following snippet as intended i needed to introduce the following into my css. not shure if this is a bug, cause if display is set to true (for the $$ code) it sets it to block. otherwise i have to set it to inline-block manually to be rendered probably. Unshure if this is buggy or intended, thats why i posted it here.

Math $\alpha$

$$
\beta+\gamma
$$

.MathJax {
    display: inline-block;
    vertical-align: middle;
}

[ChristianMurphy]

Welcome @thejozika! 👋
Rehype mathjax does not add any stylesheets.
If there are missing styles on the inline math from MathJax, that a question for the MathJax team.