Merge pull request #7492 from alexrybch/react-catalog-style-overrides

added support for material-ui overrides in react-catalog

.changeset/wise-clocks-accept.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Support `material-ui` overrides in plugin-catalog-react components

plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx

@@ -19,6 +19,7 @@ import {
   Box,
   Checkbox,
   FormControlLabel,
+  makeStyles,
   TextField,
   Typography,
 } from '@material-ui/core';
@@ -30,10 +31,20 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useEntityListProvider } from '../../hooks/useEntityListProvider';
 import { EntityLifecycleFilter } from '../../filters';
 
+const useStyles = makeStyles(
+  {
+    input: {},
+  },
+  {
+    name: 'CatalogReactEntityLifecyclePicker',
+  },
+);
+
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 export const EntityLifecyclePicker = () => {
+  const classes = useStyles();
   const { updateFilters, backendEntities, filters, queryParameters } =
     useEntityListProvider();
 
@@ -91,7 +102,9 @@ export const EntityLifecyclePicker = () => {
         )}
         size="small"
         popupIcon={<ExpandMoreIcon data-testid="lifecycle-picker-expand" />}
-        renderInput={params => <TextField {...params} variant="outlined" />}
+        renderInput={params => (
+          <TextField {...params} className={classes.input} variant="outlined" />
+        )}
       />
     </Box>
   );

plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx

@@ -19,6 +19,7 @@ import {
   Box,
   Checkbox,
   FormControlLabel,
+  makeStyles,
   TextField,
   Typography,
 } from '@material-ui/core';
@@ -32,10 +33,20 @@ import { EntityOwnerFilter } from '../../filters';
 import { getEntityRelations } from '../../utils';
 import { formatEntityRefTitle } from '../EntityRefLink';
 
+const useStyles = makeStyles(
+  {
+    input: {},
+  },
+  {
+    name: 'CatalogReactEntityOwnerPicker',
+  },
+);
+
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 export const EntityOwnerPicker = () => {
+  const classes = useStyles();
   const { updateFilters, backendEntities, filters, queryParameters } =
     useEntityListProvider();
 
@@ -95,7 +106,9 @@ export const EntityOwnerPicker = () => {
         )}
         size="small"
         popupIcon={<ExpandMoreIcon data-testid="owner-picker-expand" />}
-        renderInput={params => <TextField {...params} variant="outlined" />}
+        renderInput={params => (
+          <TextField {...params} className={classes.input} variant="outlined" />
+        )}
       />
     </Box>
   );

plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx

@@ -29,15 +29,21 @@ import { useDebounce } from 'react-use';
 import { useEntityListProvider } from '../../hooks/useEntityListProvider';
 import { EntityTextFilter } from '../../filters';
 
-const useStyles = makeStyles(_theme => ({
-  searchToolbar: {
-    paddingLeft: 0,
-    paddingRight: 0,
+const useStyles = makeStyles(
+  _theme => ({
+    searchToolbar: {
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
+    input: {},
+  }),
+  {
+    name: 'CatalogReactEntitySearchBar',
   },
-}));
+);
 
 export const EntitySearchBar = () => {
-  const styles = useStyles();
+  const classes = useStyles();
 
   const { filters, updateFilters } = useEntityListProvider();
   const [search, setSearch] = useState(filters.text?.value ?? '');
@@ -53,10 +59,11 @@ export const EntitySearchBar = () => {
   );
 
   return (
-    <Toolbar className={styles.searchToolbar}>
+    <Toolbar className={classes.searchToolbar}>
       <FormControl>
         <Input
           id="input-with-icon-adornment"
+          className={classes.input}
           placeholder="Search"
           autoComplete="off"
           onChange={event => setSearch(event.target.value)}

plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx

@@ -19,6 +19,7 @@ import {
   Box,
   Checkbox,
   FormControlLabel,
+  makeStyles,
   TextField,
   Typography,
 } from '@material-ui/core';
@@ -30,10 +31,20 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useEntityListProvider } from '../../hooks/useEntityListProvider';
 import { EntityTagFilter } from '../../filters';
 
+const useStyles = makeStyles(
+  {
+    input: {},
+  },
+  {
+    name: 'CatalogReactEntityTagPicker',
+  },
+);
+
 const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 export const EntityTagPicker = () => {
+  const classes = useStyles();
   const { updateFilters, backendEntities, filters, queryParameters } =
     useEntityListProvider();
 
@@ -87,7 +98,9 @@ export const EntityTagPicker = () => {
         )}
         size="small"
         popupIcon={<ExpandMoreIcon data-testid="tag-picker-expand" />}
-        renderInput={params => <TextField {...params} variant="outlined" />}
+        renderInput={params => (
+          <TextField {...params} className={classes.input} variant="outlined" />
+        )}
       />
     </Box>
   );

plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx

@@ -43,29 +43,34 @@ import {
 import { UserListFilterKind } from '../../types';
 import { reduceEntityFilters } from '../../utils';
 
-const useStyles = makeStyles<Theme>(theme => ({
-  root: {
-    backgroundColor: 'rgba(0, 0, 0, .11)',
-    boxShadow: 'none',
-    margin: theme.spacing(1, 0, 1, 0),
+const useStyles = makeStyles<Theme>(
+  theme => ({
+    root: {
+      backgroundColor: 'rgba(0, 0, 0, .11)',
+      boxShadow: 'none',
+      margin: theme.spacing(1, 0, 1, 0),
+    },
+    title: {
+      margin: theme.spacing(1, 0, 0, 1),
+      textTransform: 'uppercase',
+      fontSize: 12,
+      fontWeight: 'bold',
+    },
+    listIcon: {
+      minWidth: 30,
+      color: theme.palette.text.primary,
+    },
+    menuItem: {
+      minHeight: theme.spacing(6),
+    },
+    groupWrapper: {
+      margin: theme.spacing(1, 1, 2, 1),
+    },
+  }),
+  {
+    name: 'CatalogReactUserListPicker',
   },
-  title: {
-    margin: theme.spacing(1, 0, 0, 1),
-    textTransform: 'uppercase',
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
-  listIcon: {
-    minWidth: 30,
-    color: theme.palette.text.primary,
-  },
-  menuItem: {
-    minHeight: theme.spacing(6),
-  },
-  groupWrapper: {
-    margin: theme.spacing(1, 1, 2, 1),
-  },
-}));
+);
 
 export type ButtonGroup = {
   name: string;