Question

我使用react-universally作为ReactJS应用程序样板和bootstrap 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覆盖，它将所有字体设置为bootstrap默认值。

我可以想象这是由于在加载bootstrap之前正在执行的import "./globals.css"命令，因此当我加载bootstrap时，它调用_reboot来重置所有参数，包括其字体，覆盖我的设置

我如何使用DemoApp显示的组件方法，在bootstrap完成其设置周期后反转该顺序并加载globals.css，以便我的字体可以毫无问题地使用？

如果不可能，是否有其他解决方案可用于在ReactJS环境中全局设置引导变量？

感谢您的帮助。

Answer 1

您globals.css应覆盖全局bootstrap.css，或者至少在加载bootstrap.css后应用。{/ p>

由于文件是全局的，您可以在bootstrap之后创建一个Link：

<link
  rel="stylesheet"
  href="/scripts/css/bootstrap.css"
/>
<link
  rel="stylesheet"
  href="/scripts/css/globals.css"
/>

我错过了什么吗？

在ReactJS应用程序中加载全局引导程序配置

1 个答案: