web-dev-qa-db-ja.com

styled-components-htmlまたはbodyタグにスタイルを設定する方法は？

通常、純粋なCSSを使用する場合、次のものを含むスタイルシートがあります。

html {
    height: 100%;
}

body {
    font-size: 14px;
}

Reactプロジェクトでstyled-componentsを使用する場合、htmlまたはbodyタグのスタイルを設定するにはどうすればよいですか？別のCSSファイルを維持しますか？この目的のためだけに？

styled-components
23
JoeTidee

もちろん、<link>タグを使用してHTMLに含める別のCSSファイルを維持できます。

v4の場合：

Styled-componentsの createGlobalStyle を使用します。

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

プレv4：

Styled-componentsはinjectGlobalヘルパーもエクスポートして、JavaScriptからグローバルCSSを挿入します。

import { injectGlobal } from 'styled-components';

injectGlobal`
  html {
    height: 100%;
    width: 100%;
  }
`

詳細については、 APIドキュメント を参照してください！

46
mxstbr

2018年10月現在

[〜＃〜] note [〜＃〜]

InjectGlobal APIは削除され、styled-components v4のcreateGlobalStyleに置き換えられました。

ドキュメントによると、createGlobalStyleは

グローバルスタイルを処理する特別なStyledComponentを生成するヘルパー関数。通常、スタイル付きコンポーネントは自動的にローカルCSSクラスにスコープされるため、他のコンポーネントから分離されます。 createGlobalStyleの場合、この制限は削除され、CSSリセットやベーススタイルシートなどを適用できます。

例

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <Navigation /> {/* example of other top-level stuff */}
  <GlobalStyle whiteColor />
</React.Fragment>

公式ドキュメント で詳細をご覧ください。

17
Madan Bhandari