-
Notifications
You must be signed in to change notification settings - Fork 143
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS injected in the wrong order #161
Comments
Apparently This example reverses the order which ensures that parents' - outermost then topmost - styles gets added in the end, therefore overriding the children's. const insertCss = (...styles) => {
const removeCss = styles.map(style => style._insertCss({ prepend: true }));
return () => {
removeCss.forEach(dispose => dispose());
};
}; |
In the previous example we need to be careful when using the children outside their Overriding parent <>
<OverrideAppBackgroundColor /> {/* This will cancel the override below */}
<OverrrideOverrideAppBackgroundColor /> {/* This will get the same style as the one above */}
</> We can solve this by adding an const insertCss = (...styles) => {
const removeCss = styles.map(style =>
style._insertCss({ prepend: !style.override })
);
return () => {
removeCss.forEach(dispose => dispose());
};
};
// OverrrideOverrideAppBackgroundColor.js
// ...
const Outside = () => {
useStyles({ ...styles, override: true });
return <OverrrideOverrideAppBackgroundColor className={styles.app} />;
}; But it's better to not depend on it as things could get messy if useStyles(overrideStyle, style); |
I've created a repository to reproduce the issue I am having. Please refer to the readme, which explains the issue.
https://github.com/allotrop3/isomorphic-style-loader-injection-issue
The text was updated successfully, but these errors were encountered: