Question

我正在使用reactjs和样式化组件。我得到了一个包含style.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组件来自样式化组件，并提供可继承的样式。看起来像这样：

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

我的问题是：字体最初可以使用，但是当我在输入字段中键入内容时，它将重新下载字体并重置我的h1。 Live看起来像它的粗体和粗体，但它只是在改变字体。

几封信后，我的网络调试如下：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'>

希望对您有帮助谢谢：）

输入值更改导致字体导入

1 个答案: