0

我有一个父主题，我想在同一页面上有一个使用不同主题的按钮。

我的按钮当前使用的主题文件：

export const tesla = {
  font: {
    family: {
      headings: {
        regular: "/fonts/Metropolis-Medium.ttf",
        bold:    "/fonts/Metropolis-Bold.ttf",
      },
      body: {
        light: "/fonts/Metropolis-Regular.ttf",
        regular: "/fonts/Metropolis-Regular.ttf",
        semibold: "/fonts/Metropolis-Regular.ttf",
        bold: "/fonts/Metropolis-Regular.ttf"
      },
    },
    sizes: {
      heading: {
        large: "36px",
        medium: "24px",
        small: "18px",
        xsmall: "18px",
      },
    },
  },
}

我想使用特斯拉主题出现的地方：

<div className="button-demo-container">
  <ThemeProvider theme={tesla}>
     <Button tag="button" type="button" className="solid l">Button 1</Button>
  </ThemeProvider>
  <Button tag="button" type="button" className="solid">Button 2</Button>
  <Button tag="button" type="button" className="solid s">Button 3</Button>
  <Button tag="button" type="button" className="solid xs">Button 4</Button>
  <Button tag="button" type="button" className="solid xs disabled">Button 5</Button>
</div>

这是我第一次尝试使用主题。父主题按预期呈现，但使用 tesla 主题的按钮正在工作，但 font-family... 仍在显示父主题 font-family。我有一个全局 CSS 文件，我在其中设置了字体......见下文：

  /* Fonts */
  @font-face {
    font-family: 'brand-font-regular';
    src: url(${props => props.theme.font.family.headings.regular});
    font-display: swap;
  }
  @font-face {
    font-family: 'brand-font-bold';
    src: url(${props => props.theme.font.family.headings.bold});
    font-display: swap;
  }
  @font-face {
    // Font weight equivalent 300
    font-family: 'brand-body-font-light';
    src: url(${props => props.theme.font.family.body.light});
    font-display: swap;
  }

我在 Button 组件中使用了“brand-font-regular”。不知道我哪里出错了......任何帮助将不胜感激

4

0 回答 0