@fluentui/react-compose
Composition functionality for Fluent UI
This functionality is in the experimental stage and should never be used in production as APIs might change before final release.
Usage
To import compose
and use:
import { Button } from '@fluentui/react-northstar';
import { compose } from '@fluentui/react-compose';
const PrimaryButton = compose(Button, {
className: 'ui-primary-button',
displayName: 'PrimaryButton',
mapPropsToStylesProps: props => ({ compact: props.compact }),
handledProps: ['compact'],
overrideStyles: true,
});
-
className
overrides aclassName
that we will be assigned to theroot
slot of a component -
displayName
modifies a React'sdisplayName
for component, it will be also used as a selector for styles overrides in your theme -
mapPropsToStylesProps
passes additional design terms to styles functions -
handledProps
is an array of props that will not be bypassed to the component's root slot -
overrideStyles
indicates should the component will use only its own styles or will merge those with parent's