我想使用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')
);
答案 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,以删除某些浏览器的规则。