如何使用样式化组件设置全局字体系列

时间:2019-04-02 09:43:54

标签: css reactjs styled-components

我想使用font-family全局设置Styled-Components。我使用了createGlobalStyle并将字体设置为body,但是body内的div没有继承字体。

这是我的样式化组件主体:

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')
);

enter image description here

2 个答案:

答案 0 :(得分:1)

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

在浏览器中,默认样式表以字体简写形式提到了该字体。尝试提供以下格式的字体,让我知道它是否有效。

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

答案 1 :(得分:1)

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

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

`

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