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

Question

我想设置font-family全局使用Styled-Components. 我使用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')
);

标签： cssreactjsstyled-components

Answer 1

我认为您可以使用*selector 而不是body.

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

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