Fix Paper margin in QueueSelector

ECN · Apr 22, 2021 · 01e9329 · 01e9329
1 parent 8eeca75
commit 01e9329
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { TextField, Checkbox, InputAdornment, useTheme, Paper } from "@material-ui/core";
+import { TextField, Checkbox, InputAdornment, useTheme, Paper, makeStyles } from "@material-ui/core";
 import { Autocomplete } from "@material-ui/lab";
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
@@ -38,6 +38,12 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
     const activeQueues = cookies['active-queues'] !== undefined ? cookies['active-queues'].split(',') : [];
 
     const theme = useTheme();
+    const useStyles = makeStyles({
+		Paper_root: {
+            margin: theme.spacing(1)
+        }
+	});
+	const classes = useStyles();
 
     // Prepopulate Active Queues from Cookies
     useEffect( _ => {
@@ -112,8 +118,8 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
     );
 
     return(
-        // Box is used for margin because Autocomplete CSS overrides don't work as expected.
-        <Paper elevation={0} margin={`${theme.spacing(1)}px`}>
+        // Paper is used for margin because Autocomplete CSS overrides don't work as expected.
+        <Paper elevation={0} classes={{ root: classes.Paper_root }}>
             <Autocomplete
                 renderInput={(params) => (
                     <TextField