From 94b67d65b145975d9a62082995d1841511b86fe7 Mon Sep 17 00:00:00 2001 From: germanocaumo Date: Fri, 13 Nov 2026 14:53:27 -0300 Subject: [PATCH] fix(BBBCheckbox): show the brand color when checked or indeterminate The color rule, `&.Mui-checked`, is exactly as specific as MUI's own checked/indeterminate rule, so whichever stylesheet comes later wins. In BigBlueButton, MUI's emotion styles are injected after the styled-components sheet, so a checked box shows MUI's default blue (#1976d2) instead of colorBrand1. The indeterminate state was never styled, so it always showed MUI's blue. Double the class so the brand color wins in either order, and apply it to the indeterminate state too. A disabled box now always shows MUI's disabled color; where the library's rule used to win, a disabled checked box was brand-colored. --- src/components/Checkbox/styles.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Checkbox/styles.ts b/src/components/Checkbox/styles.ts index 79ceb6e..0c31e58 100644 --- a/src/components/Checkbox/styles.ts +++ b/src/components/Checkbox/styles.ts @@ -54,13 +54,17 @@ export const HelperText = styled.label` // box; the outline is what makes keyboard focus visible. MUI never sets // `Mui-focusVisible` while disabled, so a focusable disabled input (one with a // tooltip) is matched through `:has` instead. +// MUI's own checked/indeterminate color rule is as specific as `&.Mui-checked` +// and can be injected after it (it is in BigBlueButton), so the brand color +// doubles the class to win either way. A disabled box keeps MUI's disabled color. export const StyledCheckbox = styled(MuiCheckbox)` &.MuiCheckbox-root { padding: 0; border-radius: ${({ $round }) => ($round ? '50%' : borderRadiusSmall)}; } - &.Mui-checked { + &&.Mui-checked:not(.Mui-disabled), + &&.MuiCheckbox-indeterminate:not(.Mui-disabled) { color: ${colorBrand1}; }