Skip to content
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

chore(examples/theme-ui): fix styling #3949

Merged
merged 5 commits into from
Aug 12, 2022

Conversation

scottybrown
Copy link
Contributor

@scottybrown scottybrown commented Aug 7, 2022

We expect the theme-ui example's pages to have a stark blue background, to demonstrate that the theme-ui theme is being applied.

Instead, it has no styling at all.

The cause is this PR, which removes some lines which are fundamental to how theme-ui works.

I have also removed 2 entries from a useEffect dependency array which were also added in the mentioned PR, which were causing repeated Maximum update depth exceeded to appear in the browser console. This does not seem to affect this example, but can cause UI hangs on apps with state.

I've been unsuccessful in running linting against this example, so I can't verify whether my changes have brought back lint warnings. But they've certainly made the example more useful :)

Testing Strategy:

  • Test that blue background appears on / and /jokes/
  • Test that maximum update depth exceeded does not repeatedly appear in browser console

@changeset-bot
Copy link

changeset-bot bot commented Aug 7, 2022

⚠️ No Changeset found

Latest commit: 4781dcd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@remix-cla-bot
Copy link
Contributor

remix-cla-bot bot commented Aug 7, 2022

Hi @scottybrown,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at hello@remix.run.

Thanks!

- The Remix team

@remix-cla-bot
Copy link
Contributor

remix-cla-bot bot commented Aug 7, 2022

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

@scottybrown scottybrown changed the title chore(examples): fix styling in example chore(examples): fix styling in theme-ui example Aug 7, 2022
@scottybrown scottybrown marked this pull request as ready for review August 7, 2022 02:15
@MichaelDeBoey MichaelDeBoey changed the title chore(examples): fix styling in theme-ui example chore(examples/theme-ui): fix styling Aug 7, 2022
examples/theme-ui/app/root.tsx Outdated Show resolved Hide resolved
@scottybrown
Copy link
Contributor Author

This fix involves using useCallback so that reset is a stable reference for the dependency array. And removing the code that was writing straight to emotionCache without using state.
My testing found that this code is not required for either client or server side styling. It looks like it was taken from this Saas UI example, perhaps unnecessarily.

Copy link
Member

@kentcdodds kentcdodds left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@kentcdodds kentcdodds merged commit c626d10 into remix-run:main Aug 12, 2022
kayac-chang pushed a commit to kayac-chang/remix that referenced this pull request Sep 3, 2022
Co-authored-by: scottybrown <scott.brown@inlight.com.au>
freeman pushed a commit to freeman/remix that referenced this pull request Sep 7, 2022
Co-authored-by: scottybrown <scott.brown@inlight.com.au>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants