18

私はhttps://github.com/styled-components/styled-componentsを使用しています。

を必要とするコンポーネントの最適な戦略を考え出そうとしています@font-face。各コンポーネントがそのコンテキストから独立していることを確認したいので、font-familyそれぞれにスタイルを定義しています。しかしinjectGlobal、複数のコンポーネントで使用する@font-faceと、同じフォントに対して複数のルールが取得されます。

エントリポイント コンポーネントで@font-faceルールを定義するだけで、目的のフォントがブラウザによって読み込まれない可能性があるという事実を受け入れる必要がありますか?ThemeProvider

4

4 に答える 4

28

それがまさに私たちが作った理由injectGlobalです。私たちのドキュメントを見ると、次のように書かれています。

これを使用することはお勧めしません。1 つのファイルに含まれるアプリごとに最大 1 回使用します。これは脱出用のハッチです。まれな@font-face定義またはボディ スタイリングにのみ使用してください。

したがって、次のglobal-styles.jsコードを含むという名前の JS ファイルを作成します。

// global-styles.js

import { injectGlobal } from 'styled-components';

injectGlobal`
  @font-face {
     font-family: 'My custom family';
     src: url('my-source.ttf');
  }
`

ご覧のとおり、ここで行うことは、グローバル スタイルを挿入することだけです。この場合は@font-face. これを機能させるために最後に必要なことは、このファイルをメイン エントリ ポイントにインポートすることです。

// index.js

import './global-styles.js'

// More stuff here like ReactDOM.render(...)

これは、font-face が 1 回だけ注入されることを意味しますが、それでもすべてのコンポーネントがfont-family: 'My custom family'!でそれにアクセスできます。

このようにすると、flash-of-invisible-text (FOIT) が表示されますが、これは何の関係もありませんstyled-components。通常の CSS を使用している場合も同様です。@font-faceFOIT を取り除くには、単なるingではなく、より高度なフォント読み込み戦略が必要です。

これは とは何の関係もないので、Front End Centerstyled-componentsの 2 つのエピソードを見て、これを行う最善の方法について詳しく学ぶことを強くお勧めします。

于 2017-03-20T09:22:16.673 に答える
10

injectGlobalは非推奨です。createGlobalStyleを使用する

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`  
  body {
    font-family: 'Muli', sans-serif;

    h1 {
      font-weight: 800;
      font-size: 36px;

    p {
      font-size: 18px;
    }
  }
`;

次に、それを App.js で使用できます。

import { GlobalStyle } from './styles/global'

class App extends Component {
  render() {

    return (
      <ThemeProvider theme={theme}>
        <>
          <GlobalStyle/>
          <Container/>
        </>
      </ThemeProvider>

    )
  }
}
于 2019-03-05T22:24:17.753 に答える