Изменение входного значения вызывает импорт шрифта

Question

Я работаю с ReactionJs и Styled-компонентов.Я получил InputComponent, который содержит styled.input.Мой родительский компонент содержит этот компонент Input, const styled.h1 и компонент кнопки.

Мой родительский рендер выглядит так:

  render() {
    return (
      <Div>
        <GlobalStyle/>
        <H1>Hallo</H1>
        <MyInput value={this.state.value} onChangeValue={this.handleChangeValue} />
        <br/><MyButton msg={this.state.value}/>
      </Div>
    );
  }

Возможно, вы заметили компонент GlobalStyle.Компонент GlobalStyle является частью стилевых компонентов и предоставляет наследуемые стили.Это выглядит так:

const GlobalStyle = createGlobalStyle `
  body {
    @import url('https://fonts.googleapis.com/css?family=Lato');
    font-family: 'Lato',sans-serif;
  }
`

Моя проблема в том, что шрифт изначально работает, но когда я что-то печатаю в поле ввода, он повторно загружает шрифт и сбрасывает мой h1.Вживую это выглядит так, как будто оно становится жирным и смелым, но оно просто меняет шрифты

После нескольких писем моя сетевая отладка выглядит так: Сетевой образ

Спасибо за помощь.

Проект https://codesandbox.io/s/github/robertdudaa/reactjstest

Answer 1

вы можете попробовать:

const GlobalStyle = createGlobalStyle `
 @import url('https://fonts.googleapis.com/css?family=Lato');
  body {
    font-family: 'Lato',sans-serif;
  }
`

или вы можете просто импортировать шрифт в index.html в вашей общей папке каталога проекта:

<link href="https://fonts.googleapis.com/css?family=css?family=Lato" rel="stylesheet" type='text/css'>

hopeэто поможет вам спасибо :) 1009 *