CODEWITHSUNDEEP
reactjsmaterial-ui
Nathan
Nathan

Reputation: 78549

MUI text is slightly offcenter in elements

I'm using MUI in React (@mui/material) and I've noticed in a few components text is slightly vertically offcenter. For example in a Chip:

enter image description here

It's hard to notice, but see how the text isn't directly in the center? It looks different than the chip examples I found in the MUI documentation.

It's annoying me, and I want to see if there's some way to fix it. Any ideas?

edit: I'm using Bootstrap as well, but I disabled it and still saw the issue. Maybe it has to do something with linehight? I've tried adjusting the lineheight to make it smaller and all that does it clip off part of the top of the text, doesn't change the centering. If I inspect elements I see that there is a small space underneath the text (when selecting the innermost span), but no margin or padding.

I also see this slight offcentering on MUI Buttons.

edit 2: This is only happening in firefox, see the comments for details.

Upvotes: 1

Views: 264

Answers (1)

Nathan
Nathan

Reputation: 78549

Okay, solved it. My font family was "Roboto", "Helvetica", "Arial", sans-serif and that was the root cause.

It looks like it was a chain of issues: "Roboto" wasn't installed, so it was falling back into Helvetica, which was failing because of firefox and/or using Linux. Apparently helvetica isn't good for Linux, although it seems like it was only causing issues in Firefox (see here)

I solved it by installing typeface-roboto from NPM, and importing it.

Upvotes: 1

Related Questions