【发布时间】：2017-09-16 02:40:06
【问题描述】：
我使用 react-universally 作为 ReactJS 应用程序样板，并使用引导程序 4 进行样式设置。这里是主要组件DemoApp：
import 'normalize.css/normalize.css';
import React from 'react';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
import Helmet from 'react-helmet';
import config from '../../utils/config';
import './globals.css';
import Error404 from './Error404';
import Header from './Header';
import AsyncHomeRoute from './AsyncHomeRoute';
import AsyncCounterRoute from './AsyncCounterRoute';
import AsyncAboutRoute from './AsyncAboutRoute';
/// Should change the language below according to the user preference language
function DemoApp() {
return (
<div style={{ padding: '2rem' }}>
<Helmet>
<html lang="en" />
<title>{config('htmlPage.defaultTitle')}</title>
<meta name="application-name" content={config('htmlPage.defaultTitle')} />
<meta name="description" content={config('htmlPage.description')} />
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="msapplication-TileColor" content="#2b2b2b" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
<meta name="theme-color" content="#2b2b2b" />
{/*
A great reference for favicons:
https://github.com/audreyr/favicon-cheat-sheet
It's a pain to manage/generate them. I run both these in order,
and combine their results:
http://realfavicongenerator.net/
http://www.favicomatic.com/
*/}
<link
rel="apple-touch-icon-precomposed"
sizes="152x152"
href="/favicons/apple-touch-icon-152x152.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="144x144"
href="/favicons/apple-touch-icon-144x144.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="120x120"
href="/favicons/apple-touch-icon-120x120.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="114x114"
href="/favicons/apple-touch-icon-114x114.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="76x76"
href="/favicons/apple-touch-icon-76x76.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="72x72"
href="/favicons/apple-touch-icon-72x72.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="57x57"
href="/favicons/apple-touch-icon-57x57.png"
/>
<link
rel="apple-touch-icon-precomposed"
sizes="60x60"
href="/favicons/apple-touch-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/apple-touch-icon-180x180.png"
/>
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#00a9d9" />
<link rel="icon" type="image/png" href="/favicons/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/favicons/favicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico" />
<meta name="msapplication-TileColor" content="#2b2b2b" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="/favicons/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="/favicons/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/favicons/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="/favicons/mstile-310x310.png" />
<link rel="manifest" href="/manifest.json" />
{/*
NOTE: This is simply for quick and easy styling on the demo. Remove
this and the related items from the Content Security Policy in the
global config if you have no intention of using milligram.
*/}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine"
/>
<link
rel="stylesheet"
href="/scripts/css/bootstrap.css"
/>
</Helmet>
<Header />
<div style={{ paddingTop: '2rem', paddingBottom: '2rem' }}>
<Switch>
<Route exact path="/" component={AsyncHomeRoute} />
<Route path="/counter" component={AsyncCounterRoute} />
<Route path="/about" component={AsyncAboutRoute} />
<Route component={Error404} />
</Switch>
</div>
</div>
);
}
export default DemoApp;
还有我的 global.css 文件，用于设置所有应用程序的样式：
html {
box-sizing: border-box;
font-family: 'Tangerine', serif !important;
color: red;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Inline our ul for our menu */
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li { display: inline; margin: 0 .5rem; }
我的问题是字体集 (Tangerine) 没有显示。它正在应用，但随后被 boostraps _reboot.css 覆盖，将所有字体设置为引导默认值。
我可以想象这是由于在加载引导程序之前正在执行的import "./globals.css" 命令，所以当我加载引导程序时，它会调用_reboot 来重置所有参数，包括它的字体，覆盖我的设置。
如何使用 DemoApp 显示的组件方法，在引导程序完成其设置周期后反转该顺序并加载 globals.css，以便可以毫无问题地使用我的字体？
如果不可能，是否有其他解决方案可以在 ReactJS 环境中全局设置引导变量？
感谢您的帮助。
【问题讨论】：
-
你在这里忘记了一个空格：
serif!important;它是serif !important;
标签： javascript css twitter-bootstrap reactjs