如何使用 Styled-Components 设置全局字体系列

Question

我想使用 Styled-Components 全局设置 font-family。我用了createGlobalStyle，把font设置为body，但是body里面的div没有继承字体。

这是我的 Styled-components 正文：

import {createGlobalStyle} from 'styled-components';

export const AppRoot = createGlobalStyle`
  body {
    @import url('../../font.css');
    font-family: Vazir !important;
    direction: rtl;
    text-align: right;
    cursor: default;
  }
`;

下面是我的使用方法：

import {AppRoot} from './StyledComponents';

ReactDOM.render (
  <Fragment>
    <AppRoot/>
    <App />
  </Fragment>,
  document.getElementById ('root')
);

Answer 1

我的建议是用准确的格式覆盖值

在浏览器中，默认样式sheet提到了字体shorthand格式的字体。尝试以下面的格式提供字体，让我知道它是否有效。

 font: italic small-caps normal 13px/150% Vazir;

Answer 2

我认为您可以使用 * 选择器而不是 body。

export default createGlobalStyle`
        * {
            @import url('../../font.css');
            font-family: Vazir !important;
            // CSS you want global. 
        }
    
`

我用它来创建重置 css 以删除一些浏览器的规则。

如何使用 Styled-Components 设置全局字体系列

How can set global font-family using Styled-Components

css

reactjs

styled-components