I've defined a custom theme in my App.js file like this:
let theme = createTheme({
palette: {
bgCells: {
textAlign: 'right',
color: '#8ccadf',
backgroundColor: '#eef7ff'
}
}
});
In another component called Report.js, I want to use the bgCells style from the theme using the useTheme hook, as shown below:
import React from 'react';
import { TableCell, TableRow, useTheme } from '@mui/material';
export default function Report(props) {
const { info } = props;
const theme = useTheme();
let myClass;
if (info.is_active) {
myClass = classes.someStyles;
} else {
myClass = theme.palette.bgCells;
}
return (
<TableRow className={myClass}>
<TableCell>
{
. . . .
However, myClass = theme.palette.bgCells doesn't seem to be applied to my
<TableRow className={myClass}>Any suggestions on what might be going wrong?