diff --git a/packages/plasma-asdk/README.stories.mdx b/packages/plasma-asdk/README.stories.mdx index 4d53da0782..6e30d04c0e 100644 --- a/packages/plasma-asdk/README.stories.mdx +++ b/packages/plasma-asdk/README.stories.mdx @@ -23,9 +23,38 @@ import { Meta } from "@storybook/addon-docs"; ```bash $ npm install --save react react-dom $ npm install --save styled-components -$ npm install --save @salutejs/plasma-asdk @salutejs/plasma-icons +$ npm install --save @salutejs/plasma-asdk @salutejs/plasma-tokens @salutejs/plasma-typo ``` +## Настройка +Создайте компонент для подключения глобальных стилей: + +```jsx title="GlobalStyle.tsx" +import { createGlobalStyle } from 'styled-components'; +import { standard } from '@salutejs/plasma-typo'; +import { + stylesSalute__light as stylesSaluteLight +} from '@salutejs/plasma-tokens'; + +const ThemeStyle = createGlobalStyle(stylesSaluteLight); +const TypoStyle = createGlobalStyle(standard); + +export const GlobalStyle = () => ( + <> + + + +); +``` + +### Корень приложения +В корне приложения вызовите компонент глобальных стилей `GlobalStyle`: + ++ Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`. ++ Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем. + +Для корректной работы server side rendering приложение нужно обернуть `SSRProvider` (доступен в plasma-asdk); + ### Использование компонентов Все компоненты доступны из папки `components` или напрямую из пакета: