Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Bug: `sx` background not applied on Card/Accordion: Theme paints an opaque background-image

Closed
  • Is something wrong?
#318 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
68/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend, testing-qa

Research direction

Start with createDiamondOverlays() and trace how its overlays values reach Paper-derived components through ThemeProvider. Reproduce the Card example in a browser, then verify the elevation guard and MuiAutocomplete.paper behavior while preserving the existing tokens. Done means sx background colors are visible across the listed components, with a browser pixel check covering the painting behavior.

Written by the indexing model from the issue text.

Description

accepted

Bug Report

Summary

sx={{ bgcolor: ... }} has no visible effect on Card or Accordion under SRU's ThemeProvider. The style is applied, but the theme paints an opaque background-image over it, and background-image always paints above background-color.

Affects every Paper-derived component at elevation > 0: Card, Accordion, Dialog, Menu, Popover, AppBar, SnackbarContent.

Expected behaviour

<Card sx={{ bgcolor: "primary.container" }}> renders with that background.

Actual behaviour

Renders the theme's elevation surface colour. The sx background is invisible and cannot be overridden by specificity or !important — it's painting order, not cascade.

Steps to reproduce

  1. Wrap an app in SRU's ThemeProvider.
  2. Render <Card sx={{ bgcolor: "rgb(255,0,0)" }}>test</Card>.
  3. Card is not red.

B is red, A is not:

<Card sx={{ bgcolor: "rgb(255,0,0)" }}>A</Card>
<Card sx={{ bgcolor: "rgb(255,0,0)", backgroundImage: "none" }}>B</Card>

Environment

  • Package version: 0.7.1 (introduced in aea9988 / #269; not in 0.6.x)
  • MUI: reported on 7.3.10; peer range is ^7.0.0
  • Browser/OS: all — specified CSS painting behaviour

Additional context

Cause: createDiamondOverlays() fills MUI's overlays slot with opaque --ds-elevation-* hexes, both modes. Paper renders it as backgroundImage. That slot expects a translucent film; an opaque value hides everything beneath.

Wider impact: also covers our own colours as MuiSnackbarContent.root has never rendered, and disabled Accordion loses action.disabledBackground.

Fix: paint as background-color instead, tokens unchanged. Guard to elevation > 0 (or Alert breaks), and convert MuiAutocomplete.paper, which uses overlays[8] deliberately.

Tests won't catch it: they check the theme object, not output. jsdom can't see it either as the colour is in computed styles, just painted over. Needs a browser pixel check.

Workarounds: variant="outlined", elevation={0}, sx={{ backgroundImage: "none" }}.

Out of scope: borderRadius issue reported alongside is MUI specificity, not this bug.

Dominant language
TypeScript
Stars
9
Forks
3
Avg merge
6d 7h
Merged PRs (30d)
20

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

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.

More from DiamondLightSource/sci-react-ui

All issues in DiamondLightSource/sci-react-ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.