@fluentui/react-make-styles

@fluentui/react-make-styles

React bindings for makeStyles() for Fluent UI React

These are not production-ready modules and should never be used in product. This space is useful for testing new components whose APIs might change before final release.

makeStyles()

Is used to defined styles, returns a React hook that should be called inside a component:

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

const useStyles = makeStyles({
  button: { color: 'red' },
  icon: { padding: '5px' },
});

function Component() {
  const classes = useStyles();

  return (
    <div>
      <button className={classes.button} />
      <span className={classes.icon} />
    </div>
  );
}

💅 theming support

makeStyles() consumes a React context defined by FluentProvider, design tokens can be consumed via style functions:

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

const useStyles = makeStyles({
  root: theme => ({
    color: theme.colorNeutralForeground1,
    display: 'flex',
  }),
});

function Component() {
  const classes = useStyles();

  return <div className={classes.root} />;
}

function App() {
  return (
    // 👇 you can use any predefined theme or create yours
    <FluentProvider theme={webLightTheme}>
      <Component />
    </FluentProvider>
  );
}

Theme shape is defined by the Theme type which is embedded into makeStyles().

🔀 merging classes

💡 It is not possible to simply concatenate useStyles() classes.

There are cases where you need to merge classes from multiple useStyles calls. To properly merge the classes, you need to use mergeClasses() function, which performs merge and deduplication of atomic classes generated by makeStyles().

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

const useStyles = makeStyles({
  blueBold: {
    color: 'blue',
    fontWeight: 'bold',
  },
  red: {
    color: 'red',
  },
});

function Component() {
  const classes = useStyles();

  const firstClassName = mergeClasses(classes.blueBold, classes.red); // { color: 'red', fontWeight: 'bold' }
  const secondClassName = mergeClasses(classes.red, classes.blueBold); // { color: 'blue', fontWeight: 'bold' }

  return (
    <>
      <div className={firstClassName} />
      <div className={secondClassName} />
    </>
  );
}

📃 pseudo & class selectors, at-rules, global styles

makeStyles() supports pseudo, class selectors and at-rules.

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

const useStyles = makeStyles({
  root: {
    ':active': { color: 'pink' },
    ':hover': { color: 'blue' },
    // :link, :focus, etc.

    '.foo': { color: 'black' },
    ':nth-child(2n)': { background: '#fafafa' },

    '@media screen and (max-width: 992px)': { color: 'orange' },
    '@supports (display: grid)': { color: 'red' },
  },
});

Another useful feature is :global() selector, it allows to connect local styles with global selectors.

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

const useStyles = makeStyles({
  root: {
    ':global(html[data-whatintent="mouse"])': { background: 'yellow' },
    // outputs: html[data-whatintent="mouse"] .abcd { background: yellow }
  },
});

🎞 keyframes (animations)

keyframes are supported via animationName property that can be defined as an object or an array of objects:

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

const useStyles = makeStyles({
  root: {
    animationIterationCount: 'infinite',
    animationDuration: '3s',
    animationName: {
      from: { transform: 'rotate(0deg)' },
      to: { transform: 'rotate(360deg)' },
    },
  },
  array: {
    animationIterationCount: 'infinite',
    animationDuration: '3s',
    animationName: [
      {
        from: { transform: 'rotate(0deg)' },
        to: { transform: 'rotate(360deg)' },
      },
      {
        from: { height: '100px' },
        to: { height: '200px' },
      },
    ],
  },
});

makeStaticStyles()

Creates styles attached to a global selector. Styles can be defined via objects:

import { makeStaticStyles } from '@fluentui/react-components';

const useStaticStyles = makeStaticStyles({
  '@font-face': {
    fontFamily: 'Open Sans',
    src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
         url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
  },
  body: {
    background: 'red',
  },

  /**
   * ⚠️ nested and pseudo selectors are not supported for this scenario via nesting
   *
   * Not supported:
   * .some {
   *   .class { ... },
   *   ':hover': { ... }
   * }
   *
   * Supported:
   * '.some.class': { ... }
   * '.some.class:hover': { ... }
   */
});

function App() {
  useStaticStyles();

  return <div />;
}

Or with string & arrays of strings/objects:

import { makeStaticStyles } from '@fluentui/react-components';

const useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');
const useStaticStyles2 = makeStaticStyles([
  {
    '@font-face': {
      fontFamily: 'My Font',
      src: `url(my_font.woff)`,
    },
  },
  'html { line-height: 20px; }',
]);

function App() {
  useStaticStyles1();
  useStaticStyles2();

  return <div />;
}