-
Notifications
You must be signed in to change notification settings - Fork 48
Description
I have a base template component that i pass my components to and render them inside MjmlBody:
const BaseEmailTemplate = ({ children }) => {
const styles = readFileSync(resolve(__dirname, '../../assets/styles.css')).toString();
const mediaQueryStyles = readFileSync(resolve(__dirname, '../../assets/mediaQueries.css')).toString();
return (
{styles}
{mediaQueryStyles}
{children}
);
};
So I'm reading in css files and rendering the styles in MjmlHead, much like your example. For media queries, each of my templates includes ALL the styles, even styles targeted to components that a given template does not include. Since some email clients clip emails over a certain size, I want to only include styles that are relevant to the components included in a given template. Additionally, if I delete a component I want all its style definitions to go with it.
I'm wondering if you have any strategies for moving css to the component level so that only the styles associated with the children are rendered in head. Like ideally i'd like my components organized like this, with css tied to each component:
components/
BaseEmailTemplate/
BaseEmailTemplate.jsx
index.js
styles.css
Button/
Button.jsx
index.js
styles.css
Thanks for any tips.