How to pass parameters to makeStyles ?

[rgcircum]

Hi,
How to pass parameters to makeStyles ?

I tried to update my SPFx project from Fluent UI 8 to Fluent UI9

I have somme fonctionality on i need to pass parameters.

I have tried :

const useStylesTest = (props) => {
  const rootStyle = makeStyles({
    root: {
      backgroundColor: props.backgroundColor
    }
  });

  return rootStyle
}

Not work (error : All makeStyles() calls should be top level i.e. in a root scope of a file)

Same from material UI (not work)

const rootStyle = makeStyles({
  root: {
    padding:  props => props.padding
  }
});

and i tested __style method, it's work, but is not proper for me.

const useStyles = (props) => {
  const css = JSON.parse(props.css);
  return __styles(
    {
      root: {
        mc9l5x: 'cnp-Inset--inset',
      },
    },
    {
      d: css,
    },
  );
}

Is so difficult to pass from Fluent UI 8 to Fluent UI9 for existant feature.

Thanks.

[spmonahan]

Hello!

Runtime styles are not supported in makeStyles as Griffel performs ahead-of-time compilation on styles so they must be static. The docs provide more details as well as some workarounds.

[rgcircum]

Thanks.

ok, so the solution, use inline style or the __style method for dynamic params?
The __style method is not a private, it's usable in production ?

What is the point of using Griffel compared to CSS/SCSS modules or Tailwind if Griffel do not use the logic/advantage of CSS-in-JS (question for my personal skill) ?

[tombohub]

They have nice videos about how they approach and why they made some decisions:

1. styling
2. griffel

it's all about the trade offs.

[layershifter]

ok, so the solution, use inline style or the __style method for dynamic params?

Solution is to use inline styles. __styles() is a private API used for AOT.

I am slowly working on the API proposal that will make runtime styles simpler.

[rgcircum]

Good news if you add this.
Thanks for the work.