Применить глобальные шрифты, установленные в s css, к компонентам пользовательского интерфейса материала в Storybook? - PullRequest
Новая
       23

Применить глобальные шрифты, установленные в s css, к компонентам пользовательского интерфейса материала в Storybook?

0 голосов
/ 29 марта 2020

Я пытаюсь найти местный шрифт в сборнике рассказов. В настоящее время шрифт загружается через глобальный s css и применяется к любому текстовому объекту. Однако мне не удается отобразить шрифт в компонентах пользовательского интерфейса материалов.

global.s css

@font-face {
  font-family: "Iosevka";
  src: url("../../assets/iosevka-ss01-regular.woff2");
}

GlobalStory.tsx 

import { createGlobalStyle } from "styled-components"

const GlobalStory = createGlobalStyle`
  body {
    font-family: Iosevka
  }
`

export default GlobalStory

.storybook / config. js

import React from "react"
import { addDecorator } from "@storybook/react"
import { ThemeProvider } from "styled-components"
import { theme } from "../src/utils/theme"
import "!style-loader!css-loader!sass-loader!../src/styles/global.scss"
import GlobalStory from "../src/styles/globalStory"
import {
  createMuiTheme,
  ThemeProvider as MaterialThemeProvider,
} from "@material-ui/core/styles"

const materialTheme = createMuiTheme({
  typography: {
    fontFamily: "Iosveka",
  },
})

addDecorator(storyFn => (
  <ThemeProvider theme={theme}>
    <MaterialThemeProvider theme={materialTheme}>
      {storyFn()}
    </MaterialThemeProvider>
    <GlobalStory />
  </ThemeProvider>
))

Шрифт отображается с использованием текстовых тегов, таких как h1, но при использовании чего-либо как import Button from "@material-ui/core/Button", шрифт не отображается.

Как получить шрифты, которые я установил глобально, для применения к компонентам пользовательского интерфейса материала?

...