Unique CSS vars with makeStyles

[andrefcdias]

Describe the feature that you would like added

For the Flex component, CSS vars are key into having a performant solution. However, I there is currently no way of guaranteeing the uniqueness of these variables with makeStyles, leaving it open to collision with user defined variables or even when using a Flex inside of a Flex.
Being able to use a custom CSS prop and having makeStyles guarantee the uniqueness of these props would be ideal.

Proposed usage:

const colorVar = createVar();

const useStyles = makeStyles({
  root: {
    [colorVar]: 'blue',
  },
});

...

state.style = {
  [colorVar]: 'red'
}

Result

.class {
 --unique-id: 'blue'
}

<div class="class" style="--unique-id: red" />

What component or utility would this be added to

makeStyles

Have you discussed this feature with our team, and if so, who

@layershifter

Additional context/screenshots

If we opt for a solution that generates an unique ID we need also to consider how to make sure server and client generate the same ID in SSR scenarios.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.