css - 在 body 上定义的字体系列不被输入标签和占位符继承

Question

如何从文本和占位符继承字体body样式input？

body {
  font-family: "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
}

input正在使用该标签：

<input
   type="text"
   value={value}
   onChange={onChange}
   placeholder={placeholder}
   className={styles.input}
/>

目前，全局body font-family样式不适用于input文本和占位符。只有当我像这样明确添加字体样式时它才有效：

.input {
    font-family: "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;

  &::placeholder {
    font-family: "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  }
}