diff --git a/.changeset/wise-clocks-accept.md b/.changeset/wise-clocks-accept.md
new file mode 100644
index 0000000000..7b9090937b
--- /dev/null
+++ b/.changeset/wise-clocks-accept.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Support `material-ui` overrides in plugin-catalog-react components
diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
index 628526e9ab..750692ed2e 100644
--- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
+++ b/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 = ;
const checkedIcon = ;
export const EntityLifecyclePicker = () => {
+ const classes = useStyles();
const { updateFilters, backendEntities, filters, queryParameters } =
useEntityListProvider();
@@ -91,7 +102,9 @@ export const EntityLifecyclePicker = () => {
)}
size="small"
popupIcon={}
- renderInput={params => }
+ renderInput={params => (
+
+ )}
/>
);
diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index 49c950f57e..dbf6a33164 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/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 = ;
const checkedIcon = ;
export const EntityOwnerPicker = () => {
+ const classes = useStyles();
const { updateFilters, backendEntities, filters, queryParameters } =
useEntityListProvider();
@@ -95,7 +106,9 @@ export const EntityOwnerPicker = () => {
)}
size="small"
popupIcon={}
- renderInput={params => }
+ renderInput={params => (
+
+ )}
/>
);
diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
index 9fd30b5182..3a848591a3 100644
--- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
+++ b/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 (
-
+
setSearch(event.target.value)}
diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
index 64c80d1cde..9e00f7e7b0 100644
--- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
+++ b/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 = ;
const checkedIcon = ;
export const EntityTagPicker = () => {
+ const classes = useStyles();
const { updateFilters, backendEntities, filters, queryParameters } =
useEntityListProvider();
@@ -87,7 +98,9 @@ export const EntityTagPicker = () => {
)}
size="small"
popupIcon={}
- renderInput={params => }
+ renderInput={params => (
+
+ )}
/>
);
diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
index bfc55142a6..f861355762 100644
--- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx
+++ b/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 => ({
- root: {
- backgroundColor: 'rgba(0, 0, 0, .11)',
- boxShadow: 'none',
- margin: theme.spacing(1, 0, 1, 0),
+const useStyles = makeStyles(
+ 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;