Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đã đóng
  • Có gì không ổn?
#318 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 7 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
68/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend, testing-qa

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
9
Fork
4
Merge trung bình
7 ngày 17 giờ
Pull request đã merge (30 ngày)
29

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của DiamondLightSource/sci-react-ui

Tất cả issue của DiamondLightSource/sci-react-ui

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.