styled-conentsアプリケーションGoogleフォント

21959 ワード
テキストリンク

1.Googleフォントリンクインデックス。htmlに挿入

//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

2. GlobalStyle.jsに適用されるbodyは、以下のようになります。

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  * {
    box-sizing : border-box;
  }
  body{
    font-family: 'Noto Sans KR', sans-serif;
  }
`;

export default GlobalStyle;
  • theme.jsfontLogo部分の変更
    • import { css } from 'styled-components';

export const theme = {
  mainBlack: '#000000',
  mainWhite: '#FFFFFF',
  mainPink: '#FF385C',
  mainGrey: '#F7F7F7',
  darkGrey: '#797979',

  fontLogo: "'Song Myung', serif",

  fontLarge: '48px',
  fontMedium: '28px',
  fontSemiMedium: '20px',
  fontRegular: '18px',
  fontSmall: '16px',
  fontMicro: '14px',

  weightBold: 700,
  weightSemiBold: 600,
  weightRegular: 400,

  absoluteCenter: css`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  `,
};

export const mixins = {
  // flex
  flexBox: (direction = 'row', align = 'center', justify = 'center') => `
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
  `,
};

    3. index.jsファイルは次のように変更されました。(reactVersion 18に更新され、reactDom.renderは使用されなくなりました)

    import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';
import { ThemeProvider } from 'styled-components';
import { theme, mixins } from './styles/theme';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={{ ...theme, ...mixins }}>
      <Router />
    </ThemeProvider>
  </>
);
    反応がバージョン18に更新されるにつれて、反応DOMはなくなりました.レンダリングしません.
    以下に示すように、createRootによってrootが表示されます.
    You are importing createRoot from 'react-dom' which is not supported | bobbyhadz 
    import React from 'react';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';

import { ThemeProvider } from 'styled-components';
import { theme, mixins } from './styles/theme';
import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={{ ...theme, ...mixins }}>
      <Router />
    </ThemeProvider>
  </>
);
    https://www.youtube.com/watch?v=7mkQi0TlJQo
    Optimization
    HTML_DAY2