u

src/components/panels/PanelTile.jsx

@@ -2,9 +2,10 @@ import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
+import { injectMuiTheme } from './injectMuiTheme';
 import { GRID_COLUMNS, panelTilePaperSx } from './panelTileLayout';
 
-export class PanelTile extends Component {
+class PanelTileBase extends Component {
   renderTitle() {
     const { title } = this.props;
     if (!title) return null;
@@ -20,12 +21,18 @@ export class PanelTile extends Component {
   }
 
   render() {
-    const { wide = 1, children, sx, minHeight = 120 } = this.props;
+    const { theme, wide = 1, children, sx, minHeight = 120, tileKey } = this.props;
 
     return (
       <Paper
-        variant="outlined"
-        sx={panelTilePaperSx({ wide, sx, minHeight })}
+        elevation={0}
+        sx={panelTilePaperSx({
+          wide,
+          sx,
+          minHeight,
+          tileKey,
+          theme,
+        })}
       >
         {this.renderTitle()}
         <Box sx={{ flex: 1, minWidth: 0 }}>{children}</Box>
@@ -34,6 +41,8 @@ export class PanelTile extends Component {
   }
 }
 
+export const PanelTile = injectMuiTheme(PanelTileBase);
+
 export function PanelTileGrid({ children, sx }) {
   return (
     <Box