Back to Fluentui

Migrate Custom Style Overrides

apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.mdx

4.40.2-hotfix21.0 KB
Original Source

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Concepts/Migration/from v0/Custom Style Overrides" />

Migrate Custom Style Overrides

This guide provides instructions for migrate style overrides on react-northstar (v0) components to v9 components.

React-northstar provides a flexible styling and theming infrastructure and different consumers might have built their own way of adjusting the styles based on it. The component migration guides provide abstracted examples that show how to migrate one of the approaches used with v0 components to the v9 standardized makeStyles approach.

Overview

  1. create/modify COMPONENT_NAME.styles.ts file (COMPONENT_NAME is the name of your component file)
  2. in COMPONENT_NAME.styles.ts, move your custom styles into hooks from makeStyles

    if this is your first time using makeStyles, please check this guide on how to style components on fluentui docmentation site.