• ..

JavaScript

    <body> や <html> などラップできない領域のタグのスタイルを書く

    createGlobalStyleを使います。これはタグテンプレートになっていて、 CSS を書いて実行するとGlobalStyle(名前はなんでもいい)をコンポーネントを返します。これはレンダリング時にタグテンプレートに渡した CSS を<head>領域に追加してくれます。

    createGlobalStylestyled-componentsから取り込めます。

    import {createGlobalStyle} from 'styled-components';

    あとはstyled.divのあとのようにスタイルを書くだけです。コンポーネントの中(children)には何も入れてはいけません。

    const GlobalStyle = createGlobalStyle`
      html,
      body {
        height: 100%;
      }
    `;
    
    () => (
      <>
        <GlobalStyle />
        <ReduxProvider store={store}>
          <App />
        </ReduxProvider>
      </>
    );