Add global styles to emails

[liamb13]

Adding global style as a feature could be nice.

I was able to make it work by creating a new file /emails/styles.tsx

// styles.tsx
export const main = {
  backgroundColor: '#000',
};

// email.tsx
import { main } from './styles'

Issue with this method

styles.tsx shows up in preview. Workaround is to name the file components.tsx which is filtered from the list

I wasn't able to get it to work if I had the file in a subfolder. Could be nice to have a /styles/ folder and ability to have multiple template styles there.

[bukinoshita]

Yup! Let's add it.

[michaelhays]

Saw this was just moved from an issue to a discussion -- is this still planned? Or is there currently a good solution for this?

[liamb13]

I'm assuming moved here for further discussion?

[bukinoshita]

Yeah, moved all suggestions to Discussions and once it's figure it out we can move back to Issues for implementation. I wonder what would be the ideal DX for this case

[liamb13]

@bukinoshita imo - it'd be nice to have the option to do styles.tsx at root level - for email creation that should always look the same.

styles.tsx should then be filtered from the preview.

Additionally having a folder /styles/ with multiple style.tsx files inside could be handy for email creation that requires multiple stylesheets. The /styles/ folder and all children should also be hidden from the preview.

The only concern I can foresee with the above is whether styles is being used for any email templates.

A more general approach might be to allow devs to specify files or folders to filter from the preview list. This then gives devs more freedom around not just styles, but other files as well?

[EyMaddis]

For now, you can use declare your own components like <MailText> which contains your default styling. Regarding your /styles/ problem, try this branch: #615