全局字体系列不适用于按钮

Question

我使用 styled-components 以下列方式创建了一个按钮和一个链接组件

import { Link } from "react-router-dom";
import styled, { css } from "styled-components";

const style = css`

    text-decoration:none;
    font-size:2rem;
    border-radius:10px;
    color:var(--white);
    background-color:transparent;
    border: none;
    cursor: pointer;
    padding:1.25rem 3rem;
    text-transform:uppercase;
    letter-spacing:.15rem; 
    
    &:hover,
    &:active {
        color:var(--colorFour);
    }

`

export const StyledButton = styled.button`${style}`
export const StyledLink = styled(Link)`${style}`

我的项目中也有一个全局样式，它设置了一个全局字体系列

body {
  font-family: 'Comic Neue', sans-serif;
  height:100vh;
  padding:0 2rem;

  display:flex;
  justify-content:center;
  align-items:center;
  background: var(---colorOne);  
  background: linear-gradient(to right, var(--colorTwo), var(--colorOne));
}

当我使用链接组件时，应用了正确的样式'Comic Neue'

但是，如果我使用按钮，应用的样式是由于某种原因-apple-system

奇怪的是，当我查看按钮的计算样式时，看起来 'Comic Neue' 应该适用，但由于某种原因它不适用

有人知道可能是什么问题吗？

Answer 1

表单元素不继承font-family 属性。

为按钮添加font-family: inherit CSS 属性以使用与正文相同的字体。

button {
  font-family: inherit;
}