[typography] Built-in scrollMarginTop support
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Summary 💡
Improve the scroll top integration of scrollMarginTop with the Typography.
Examples 🌈
I'm not sure what's the best way to abstract this, but I wonder if it wouldn't make a lot of sense to, once/if the Typography component is moved to @mui/system, to:
- Add a minimum value of scrollMarginTop to 8px so it doesn't scroll like this:
but like this (better default when there are no sticky headers):
- Add a CSS variable to allow the header to self-declare the scroll it wants the headers to have, like here:
- Document the above.
Motivation 🔦
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Typography component and its possible move to @mui/system, then inspect docs/src/modules/brandingTheme.ts and docs/src/layouts/AppHeader.tsx referenced in the issue. Compare the current scroll behavior with the screenshots and define how the default, header-declared CSS variable, and documentation should be covered; done means the examples scroll with the intended offset.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react
- Domain
- documentation, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100