fix(ProgressBar): fix bug with progress bar colour being overridden b…

…y mui style (#163)
aws · Apr 13, 2021 · f99a50f · f99a50f
1 parent 0bfac31
commit f99a50f
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/ProgressBar/ProgressBar.md b/src/components/ProgressBar/ProgressBar.md
@@ -15,6 +15,7 @@ import Stack from 'aws-northstar/layouts/Stack';
 
     <Container headingVariant='h4' title="Circular progress bar">
         <ProgressBar label="Circular progress bar completed" variant={'circular'} value={100} displayValue={true} />
+        <ProgressBar label="Circular progress bar empty" variant={'circular'} value={0} displayValue={true} />
     </Container>
 </Stack>    
 ```

diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
@@ -36,12 +36,12 @@ const useStyles = makeStyles((theme: Theme) => ({
         marginTop: '8px',
     },
     circularColorPrimary: {
-        color: theme.palette.info.dark,
+        color: `${theme.palette.info.dark} !important`,
         position: 'absolute',
         left: 0,
     },
     circularColorBottom: {
-        color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+        color: `${theme.palette.grey[theme.palette.type === 'light' ? 200 : 700]} !important`,
     },
     barColorPrimary: {
         backgroundColor: theme.palette.info.dark,