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

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'应该适用，但由于某种原因它不适用

有谁知道可能是什么问题？

标签： javascripthtmlcssreactjsstyled-components

Answer 1

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

将font-family: inheritCSS 属性添加到按钮以使用与正文相同的字体。

button {
  font-family: inherit;
}