Data table font sizes too big
Sorry dumb polaris question here - why are the font sizes so big in the data table as compared to the docs:
https://clhom.gadget.app/edit/development/files/web/routes/index.jsx
Gadget Auth - Loading
Gadget Auth
9 Replies
@Millan any word here? Seems like it's defaulting to bodyLg somehow - I can't seem to figure out why.
May I make a fork of your app to do some experimenting?
sure thanks!
The
index.jsx file that you have in your app right now looks like it is getting styles from the custom column configs in the route preview area, and I've observed the same in a test app that I made to simulate yours. Did you observe those font styles getting overwritten in the Shopify admin ?
yeah I put those custom column configs in myself as a way to get the font sizes the way I wanted them to be - but I'm trying to better understand the root cause now and clean this up - shouldn't need those custom column configs for the text to render as bodyMd by default right?
Behind the scenes. AutoTable does not use the Polaris
Text component for the table cell values because Polaris components do not have ref props, which we use to determine if the text is overflowing so that we can provide a tooltip. We use a span that has these css classes on them
You could perhaps target those css classes within AutoTable as a way to avoid the custom column configsah gotcha
but I'm also using a DataTable and it has the same issue?
The promotions table up top is just a DataTable
DataTable from Polaris takes in
rows as a prop which is a collection of react components that you are defining. I see that you are using Text from Polaris there, and if it is not getting the styles you expect, I would honestly consider implementing my own text component as Polaris does not have much support for style overridesk