How to pass a prop to makeStyles to have dynamic style based on a condition?

[kboul]

I would like to pass a prop to assign a background color to a table. Is it possible to do sth like this?
I am using fluent ui react-components version 9

for instance:

const useStyles = makeStyles({
    tableRow: {
        backgroundColor: ${props.someProp} => someProp ? 'oneColor' : 'otherColor'
    }
});

I have searched everywhere in the documentation for version 9 but nothing is mentioned
If anyone knows please let me know.
Thank you in advance

[khmakoto]

Hi @kboul, makeStyles in version 9 can be optimized at build time, which makes doing something like the above not possible since we wouldn't know the runtime value of someProp beforehand. What you can do for those cases is something like the following:

const useStyles = makeStyles({
  tableRowBase: {
    ...
  },
  backgroundColor1: {
    backgroundColor: 'oneColor'
  },
  backgroundColor2: {
    backgroundColor: 'otherColor'
  }
});

const MyComponent = (props) => {
  const styles = useStyles();
  const tableRowClassName = mergeClasses(styles.tableRowBase, props.someProp ? styles.backgroundColor1 : styles.backgroundColor2);
  ...
}

I hope that helps!

[kboul]

Thanks a lot for your answer! One thing related to this question. If I want to pass only one dynamic value is there any way to do this? For instance

<TableCell style={{ width: cell.column.getSize() }} .../>
How would I write this using mergeClasses or any other way? Being able to pass the dynamic value to makeStyles and avoid inline styling...

[khmakoto]

No prob!

In that case, you'd need to use inline styling but only to set a css variable. Something like this:

const tableCellWidthCssVar = '--tableCell-width';

const useStyles = makeStyles({
  tableCell: {
    width: `var(${tableCellWidthCssVar})`
  },
});

const MyComponent = (props) => {
  const styles = useStyles();

  const { cellWidth } = props;

  const tableCellStyle = React.useMemo(() => ({
    [tableCellWidthCssVar]: cellWidth
  }), [cellWidth])

  return <TableCell className={styles.tableCell} style={tableCellStyle} />
}

[kboul]

Thank you for the answer and for your time but I am not sure if this is ideal for my case because I use an array map like in the following code. I am using fluent-ui in combination with react-table. I only use fluent ui for the layout part. I cannot use a useMemo for this case since the prop is defined inside the loop.

const useStyles = makeStyles({
    tableHeaderCell: {
       ...othe fixed css here
    }
});

<TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                   {headerGroup.headers.map((header) => {
                       return (
                           <TableHeaderCell
                               className={styles.tableHeaderCell}
                               colSpan={header.colSpan}
                               key={header.id}
                               onMouseDown={header.getResizeHandler()}
                               onTouchStart={header.getResizeHandler()}
                               style={{ width: header.getSize() }}
                               ...

Should I use --tableCell-width in my case ( it is not clear what exactly does) or it is just an example to illustrate. Using the way you suggest in this case seems a bit verbose comparing to using inline styles. Is there other simpler way to do achieve the same thing but using makeStyles instead?

[khmakoto]

It was just an example to illustrate and you don't need to use useMemo in your code. The main gain you get vs inline styling is if you are doing more than just setting that one style you keep it all inside of makeStyles. If that's the only style you're customizing there's not much benefit vs what you showed there.