[Paper] Custom variants disregard elevation prop
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
Steps to reproduce 🕹
Steps:
- Create a custom Paper variant
- Add variant prop with the new variant to a Paper component (or Paper-composed components e.g. Card)
- Add elevation prop greater than 0 to component
- Inspect Paper component's properties. The elevation's box-shadow and classnames will be missing.
Current behavior 😯
If you create a custom variant for a Paper component, it won't include any elevation styles if you try to add the elevation prop in tandem with the custom variant prop e.g.
<Paper variant="blue" elevation={5}>No elevation shadows here</Paper>
Expected behavior 🤔
Custom variants should include the default elevation styles unless explicitly overridden
Context 🔦
I'm attempting to create a new Paper variant and expect it to inherit all the other styles of Paper.
Your environment 🌎
npx @mui/envinfo
Browser: Chrome 105.0.5195.125
System:
OS: macOS 12.6
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: Not Found
npm: 8.5.5 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Chrome: 105.0.5195.125
Edge: Not Found
Firefox: 103.0.1
Safari: 16.0
npmPackages:
@emotion/react: ^11.10.4 => 11.10.4
@emotion/styled: ^11.10.4 => 11.10.4
@mui/base: 5.0.0-alpha.98
@mui/core-downloads-tracker: 5.10.6
@mui/icons-material: ^5.10.6 => 5.10.6
@mui/lab: 5.0.0-alpha.101 => 5.0.0-alpha.101
@mui/material: ^5.10.6 => 5.10.6
@mui/private-theming: 5.10.6
@mui/styled-engine: 5.10.8
@mui/system: 5.10.8
@mui/types: 7.2.0
@mui/utils: ^5.10.6 => 5.10.6
@mui/x-data-grid: 5.17.5
@mui/x-data-grid-pro: ^5.17.5 => 5.17.5
@mui/x-date-pickers: 5.0.3 => 5.0.3
@mui/x-date-pickers-pro: 5.0.3 => 5.0.3
@mui/x-license-pro: ^5.17.0 => 5.17.0
@types/react: ^18.0.21 => 18.0.21
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.8.4 => 4.8.4
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 linked CodeSandbox's demo.js and reproduce a Paper using a custom variant together with elevation. Trace how the Paper variant and elevation props are handled, then verify that the custom variant retains elevation's box-shadow and classnames unless they are explicitly overridden.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100