React + Aphrodite шрифты

Question

У меня проблема с добавлением шрифта в React с использованием Aphrodite.

В документации Aphrodite (https://github.com/Khan/aphrodite) мы описали, как добавить наш шрифт в проект, но у меня это не сработало.

В терминале (vsc) после запуска npm я не вижу никаких ошибок, но в браузере (хром) у меня есть следующее: TypeError: _nested.set не является функцией.

      import React, { FC, useState } from "react";

import ScreenWrapper from "components/ScreenWrapper";
import StyledInput from "components/StyledInput";
import TextArea from "components/TextArea";
import StyledText from "components/StyledText";

import { StyleSheet, css } from "aphrodite";
import { colors } from "styles";
import { i18n } from "locale";

import "fonts/Roboto.woff";

interface Props {}

const HomeScreen: FC<Props> = () => {
  const [inputValue1, setInputValue1] = useState<string>("");
  const [textareaValue1, setTextareaValue1] = useState<string>("");

  const handleInputValue = (value: string): void => {
    setInputValue1(value);
  };
  const handleTextareaValue = (value: string): void => {
    setTextareaValue1(value);
  };

  return (
    <ScreenWrapper>
      <div className={css(styles.homeScreen)}>
        <h3>{i18n.t("header:title")}</h3>
        <StyledInput
          value={inputValue1}
          onChange={handleInputValue}
          placeholder={i18n.t("textAreaPlaceholder:search")}
        />
        <TextArea
          value={textareaValue1}
          onChange={handleTextareaValue}
          placeholder={i18n.t("textAreaPlaceholder:type")}
        />
        <StyledText style={styles.testText}>{i18n.t("test:lorem")}</StyledText>
      </div>
    </ScreenWrapper>
  );
};

const Roboto = {
  fontFamily: "Roboto",
  fontStyle: "normal",
  fontWeight: "normal",
  src: "url('fonts/Roboto.woff') format('woff')",
};

const styles = StyleSheet.create({
  homeScreen: {
    flexDirection: "column",
    alignItems: "stretch",
    display: "flex",
    flexGrow: 1,
    backgroundColor: colors.white,
    textAlign: "center",
    textTransform: "uppercase",
    color: colors.blue4,
  },
  testText: {
    margin: "20px 10vw",
    fontFamily: Roboto,
  },
});

export default HomeScreen;

Была у кого-нибудь похожая проблема?

Answer 1

Попробуйте следующее.

      const styles = StyleSheet.create({
  testText: {
    margin: "20px 10vw",
    fontFamily: [AldotheApacheFont, "sans-serif"],
  },
});

Или проверьте ниже https://www.npmjs.com/package/aphrodite-local-styles#font-faces