Merge pull request #686 from rishabhsharma1997/master

chore: added inverseBackground in checkbox
layer5io · Jul 22, 2024 · 5476179 · 5476179
2 parents 5b8d7a3 + 94614ab
commit 5476179
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/theme/components/checkbox.modifier.ts b/src/theme/components/checkbox.modifier.ts
@@ -2,14 +2,18 @@ import { Components, Theme } from '@mui/material';
 
 export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
   styleOverrides: {
-    root: ({ theme }) => {
+    root: ({ theme, ownerState }) => {
       const {
         palette: {
           text: { default: defaultText },
+          icon: { inverse: inverseColor },
           background: { brand },
           border: { strong }
         }
       } = theme;
+
+      const inverseBackground = ownerState.inverseBackground || false;
+
       return {
         color: 'transparent',
         '&.Mui-checked': {
@@ -25,7 +29,8 @@ export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
         '& .MuiSvgIcon-root': {
           width: '1.25rem',
           height: '1.25rem',
-          border: `.75px solid ${strong}`,
+          fill: inverseBackground ? inverseColor : defaultText,
+          border: `.75px solid ${inverseBackground ? inverseColor : strong}`,
           borderRadius: '2px',
           padding: '0px'
         },