Как добавить собственный шрифт к поставщику тем в стилизованных компонентах? - PullRequest
Новая
       34

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

0 голосов
/ 01 ноября 2018

Я создаю приложение React, используя стилевые компоненты material-ui с TypeScript.

Я пытаюсь использовать собственный шрифт со своими стилизованными компонентами, но я изо всех сил пытаюсь заставить его работать.

Первое, что я сделал, я создал globalStyles.ts файл createGlobalStyle: 

import { createGlobalStyle } from "styled-components";

export const theme = {
  primaryBlue: "#0794B4",
  secondaryBlue: "#043157",
  primaryWhite: "#fff"
};

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: pala;
    src: url("./assets/pala.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  html {
    font-size: 10px;
  }
`;
export default GlobalStyle;

Я добавил ThemeProvider и GlobalStyle в свое приложение: 

import React, { Component } from "react";
import "./App.css";
import NavBar from "./components/NavBar";
import { ThemeProvider } from "styled-components";
import GlobalStyle, { theme } from "./globalStyles";

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <div className="App-header">
          <NavBar title="MyCompany" />
          <GlobalStyle />
        </div>
      </ThemeProvider>
    );
  }
}

export default App;

А потом я попытался использовать этот шрифт из моего стилизованного компонента: 

import React, { PureComponent } from "react";
import styled from "styled-components";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";

export const StyledAppBar = styled(AppBar)``;
export const StyledToolbar = styled(Toolbar)``;
export const StyledTypography = styled(Typography)`
  && {
    font-family: pala;
    font-size: 10rem;
    color: ${props => props.theme.primaryWhite};
  }
`;

export interface Props {
  title: string;
}

export class NavBar extends PureComponent<Props> {
  render() {
    return (
      <StyledAppBar>
        <StyledToolbar>
          <StyledTypography>{this.props.title}</StyledTypography>
        </StyledToolbar>
      </StyledAppBar>
    );
  }
}

export default NavBar;

Стили для цвета и размера шрифта применяются правильно, но пользовательский шрифт - нет. Нужно ли каким-то образом добавлять пользовательский шрифт в ThemeProvider и использовать его через props.theme.font? Или я что-то не так делаю?

1 Ответ

0 голосов
/ 19 марта 2019

Чтобы объявить пользовательский шрифт с помощью styled-компонентов createGlobalStyle:

  1. импортируйте ваш шрифт, как если бы вы импортировали модуль
  2. интерполировать его в объявлении @font-face, используя теги литералов с тегами .

Вот ваш globalStyles.ts: 

// globalStyles.ts

import { createGlobalStyle } from "styled-components";
// 1. import the font
import pala from "./assets/pala.ttf";

export const theme = {
  primaryBlue: "#0794B4",
  secondaryBlue: "#043157",
  primaryWhite: "#fff"
};

// 2. interpolate it using tagged template literals
const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: pala;
    src: url(${pala}) format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  html {
    font-size: 10px;
  }
`;

export default GlobalStyle;

Если вы хотите больше узнать о тегах литералов шаблонов в styleled-компонентах, Макс Стоибер (который создал styleled-компоненты) написал действительно хорошую статью об этом .

...