Shadows?

[thoffmann-fms]

On this page: https://react.fluentui.dev/?path=/docs/theme-shadows--page are a list of various box shadow options. Looks interesting, but how are these used/referenced? I tried using the name as a class name, but nothing happened. The Element page shows the class name on the expected element, but no styling is applied.

[khmakoto]

They are applied as part of our token system, so you can use them by importing tokens from @fluentui/react-components:

import { makeStyles, tokens } from '@fluentui/react-components';

...

// In your styles declaration
const useStyles = makeStyles({
  root: {
    boxShadow: tokens.shadow8
  }
});

[thoffmann-fms]

Thanks, but I get a TypeScript error:

    const useStyles = makeStyles({
      boxShadow: tokens.shadow8,
    });

Type 'string' is not assignable to type 'GriffelStyle'.

"@fluentui/react-components": "^9.32.3",

[khmakoto]

Sorry, I missed something in my answer, updated above 😄

[thoffmann-fms]

Thanks, I used this:

        <div
          key={m1.FileName}
          id={m1.FileName}
          style={{
            boxShadow: tokens.shadow28,
            paddingBottom: "8px",
            borderBottom: "1px dotted gray",
          }}
        >

And the resulting DIV has box-shadow:"var(-shadow28)".