useTheme hook within className not working-CodePudding

I have the following within my App.js file:

let theme = createTheme({
  palette: {
    bgCells: {
      textAlign: 'right',
      color: '#8ccadf',
      backgroundColor: '#eef7ff'
    }
  }
});

I then have another component Report.js where I would like to access bgCells within a className via the useTheme hook, i.e.:

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>
        {
          . . . .

Unfortuantely this is not working as myClass = theme.palette.bgCells is not being reference within my <TableRow className={myClass}>

Any ideas as to what I am missing?

CodePudding user response：

palette in createTheme is not the right place for styling. You should put only colors there.

bgCells is an object, you can not add object as className. className must be string.

You can style the component with object via sx prop

<TableRow sx={{textAlign: 'right', ...}}> ... </TableRow>

CodePudding user response：

Wrap your app with ThemeProvider from MaterialUI: https://mui.com/material-ui/customization/theming/#theme-provider