mui / mui/material-ui

[Paper] Custom variants disregard elevation prop

Open
#34,615 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: paper
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:

  1. Create a custom Paper variant
  2. Add variant prop with the new variant to a Paper component (or Paper-composed components e.g. Card)
  3. Add elevation prop greater than 0 to component
  4. Inspect Paper component's properties. The elevation's box-shadow and classnames will be missing.

Codesandbox demo

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.