Hook applying styles to MessageBar slots based on state and intent.
// Source: https://github.com/microsoft/fluentui | License: MIT | Copyright Microsoft Corporation
// Provided via justclaw.it.com; keep this notice with the code.
'use client';
import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import type { SlotClassNames } from '@fluentui/react-utilities';
import type { MessageBarSlots, MessageBarState } from './MessageBar.types';
export const messageBarClassNames: SlotClassNames<MessageBarSlots> = {
root: 'fui-MessageBar',
icon: 'fui-MessageBar__icon',
bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',
};
const useRootBaseStyles = makeResetStyles({
whiteSpace: 'nowrap',
display: 'grid',
gridTemplateColumns: 'auto 1fr auto auto',
gridTemplateRows:
... (truncated -- full source via MCP)
See the full source, get the GitHub permalink, and search for more like it.
Get a free API key