search

fast-reflexes / better-react-mathjax

MIT License
124 stars 16 forks source link

How to change css style of mjx-math #55

Closed EricBatlle closed 6 months ago

EricBatlle commented 6 months ago

Hi, awesome work, it was what I was looking for so long.

I'm trying to change mjx-math element to not use white-space, to avoid overflowing like you can see here: image

Instead I want this: image

But I'm unable to change the css that it's being applied here, could you please point me to the right direction? Thanks!

fast-reflexes commented 6 months ago

Hi there!

Thanks :) This is not really a better-react-mathjax question but more of a MathJax question but I'll give it a short go anyways :)

I would solve this by stacking three HTML elements on top of each other and divide the content myself ... I wouldn't want to fiddle with the MathJax css because I would consider the results to be kind of unpredictable and maybe I would not be covering all situations or circumstances anyways so instead I would just lay it out like I want, perhaps in an inline style with 3 different blocks that would split onto multiple rows whenever necessary ... or use display: flex and set the direction to column at some breakpoint.

That being said, you CAN add css that will affect MathJax css... just add a global css file targetting either css classes used by MathJax or elements used by MathJax and they will be respected. you might have to add !important behind the css property or pay attention to where you inject your css for it not to be overridden but it should work out quite easily that way, at least from my experience. Try it out and check the inspector to make sure your css gets applied :)

Best of luck!

pkra commented 6 months ago

MathJax v4 (currently in beta) is adding line-breaking support (again). Line-breaking equations is a surprisingly hard problem to solve and any "magical" solution has its limits.

For the example, v4 should produce breaks at the equality sign but won't break inside fractions.

EricBatlle commented 6 months ago

Thank you for the feedback to both of you guys! <3