Troubleshooting

css prop is not typed

Set the JSX import source:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@fluentic/style"
  }
}

Also configure your React transform, for example in Vite:

react({ jsxImportSource: '@fluentic/style' });

Styles render in development but not production

If you use a bundler plugin, make sure the virtual runtime module is imported once:

import 'virtual:fluentic-styles';

Theme does not affect a component

Inside the component, make sure you target incoming themes:

const css = useCss(
  styles,
  ...scopeTarget(styles.root, props.theme),
);

Also make sure the component renders scope={css} if descendants need to inherit the resolved scope.

A selector method is missing

The default style export uses DefaultPrioritySelectors. If you created a custom style function, add that selector to your selector map.

Static export misses a dynamic style

Runtime fallback should handle dynamic cases. If you want extraction, move the style chain to module scope and use values the compiler can evaluate.