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

Question

我想使用 Styled-Components 全局设置 font-family。我使用了 createGlobalStyle 并将字体设置为正文，但是正文中的 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

我认为您可以使用 * 选择器而不是 body 来做到这一点。

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

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