Ability to override default font size for <Text>

[midanosi]

Goals

1. ability to override default fontsize of component (is currently 14px)

Background

The default font size of the web is 16px.
But the fontsize of is set to 14px. But s are still 16px.

So by default, emails will look funky with inconsistent font sizes. So okay, I'll just go update s to be size 14px, using Tailwind, as that seems to be the preferred method of styling. I give a a class of text-sm, but this is 0.875rem, not 14px. Which means that email looks fine on gmail where root font size is 16px, but awful (inconsistent sizing) on Apple Mail, where the root font size is smaller.

In summary, because react-email's styling library of choice is Tailwind, which works in rem, then styling naturally leads to pit of failure if you will, where you get inconsistent font-sizes across different email clients.

Proposal

I would like a method to override the default font size of elements, maybe via react-email config, or via Tailwind config, as described in this related issue: #517

[gabrielmfern]

You can override them by just using React's composition. Create a Text component that uses ours under the hood
and then just use it instead. Something like:

import { Text as BaseText } from '@react-email/text';

function Text(props) {
  return <BaseText {...props} style={{ 'font-size': '16px', ...props.style }} />;
}

I'm not sure why we do have 14px by default, but I think having a configuration for this would not be a very nice idea.
Thinking this because there are not many other use cases for the configuration except the one you mentioned.

[midanosi]

Thanks! This does seem like an okay workaround. I'd then need to make sure my team forever imports Text from this custom file, rather than directly from the library. But it ticks the box well enough for now, many thanks for the help.

Out of curiously, it would be great to know why the default font-size is 14

[gabrielmfern]

Yeah, I'm still not sure. I asked the author of the component, and he doesn't quite remember. But changing this — as he himself mentioned — would be a breaking changes for most users, as their emails are going to end up looking different if they aren't using their own font sizes.