0

我在使用 Aphrodite 在 React 中添加字体时遇到问题。

在 Aphrodite 文档（https://github.com/Khan/aphrodite）中，我们描述了如何将我们的字体添​​加到项目中，但它对我不起作用。

在终端（vsc）中，在 npm start 之后我没有看到任何错误，但在浏览器（chrome）中我有这个：TypeError: _nested.set is not a function。

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;

有没有人有类似的问题？

4

1 回答 1

0

试试下面的。

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

或查看以下https://www.npmjs.com/package/aphrodite-local-styles#font-faces

于 2021-11-10T12:01:23.343 回答