javascript - 输入值更改导致字体导入

Question

我正在使用 reactjs 和样式组件。我得到了一个包含 styled.input 的 InputComponent。我的父组件包含这个 Input 组件、一个 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 组件来自 styled-components 并提供可继承的样式。它看起来像这样:

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

我的问题是:该字体最初可以正常工作，但是当我在输入字段中键入内容时，它会重新下载字体并重置我的 h1。 Live it look like its getting bold & unbold 但它只是改变字体。

几个字母后我的网络调试看起来像这样: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;
  }
`

或者你可以简单地在元素目录的公共(public)文件夹中的 index.html 中导入字体:

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

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