输入值更改导致字体导入

Question

我正在使用 reactjs 和 styled-components。 我得到了一个包含 styled.input 的 InputComponent。 我的父组件包含这个 Input 组件、一个 styled.h1 const 和一个按钮组件。

我的父渲染如下所示：

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

也许你注意到了 GlobalStyle 组件。 GlobalStyle 组件来自 styled-components 并提供可继承的样式。 它看起来像这样：

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

我的问题是： 字体最初可以正常工作，但是当我在输入字段中输入内容时，它会重新下载字体并重置我的 h1。 Live it 看起来像是变得粗体和粗体，但它只是在改变字体。

几个字母后，我的网络调试看起来像这样：Network image

感谢您帮助我。

项目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'>

希望对你有帮助 谢谢你:)