🎨 라이트 모드, 다크 모드, 테마 커스터마이즈, Styled-components, NextJS, Typescript.

22464 단어 react design nextjs typescript

기술로 소개

NextJS

NextJS는 SSR(Server Side Rendering)의 직관적인 프레임워크 React입니다.

스타일 구성 요소

Styled-components é uma biblioteca para React que permite a escrita de CSS in JS.

감사합니다!

Criando a plicação

Para criar a aplicação iremos rodar o comando yarn create next-app <nome do projeto>, após executar esse comando ele irá começar a criar o seu projeto NextJs (pode demorar um pouquinho).

응용 프로그램에 대한 평가

Eu divido a minha estrutura do NextJS criando uma 파스타src e colocando as minhas 파스타 e arquivos lá, apenas deixando a 파스타public de fora, mas isso vai de acordo com o seu gosto!

구성 또는 Typescript

Para configurar o Typescript no projeto é bem simples, iremos adicioná-lo como dependsência de desenvolvimento no projeto yarn add typescript -D

Agora iremos criar o arquivo tsconfig.json , 노스터미널 에스크레바 touch tsconfig.json

Iremos modificar o nome das nossas páginas dentro de src/pages 확장 제거.js 및 추가.tsx

E set tudo deu certo pelo menos eu espero que sim, podemos rodar yarn dev no nosso terminal e abrira a página do NextJS na porta :3000

구성 요소 스타일 구성 요소

Vamos começar adicionado o styled-components no projeto, portanto escreve no seu terminal yarn add styled-components

Iremos criar um arquivo chamado _document.tsx dentro de src/pages , nele haverá o seguinte conteúdo. Isso é para as injeções de estilo no server side rendering.

import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

Dentro da nossa 파스타src/styles vamos criar o arquivostyled.d.ts para sobrescrevermos os tipos do styled-components.

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    title: string;
    colors: {
      primary: string;
      secundary: string;

      background: string;
      text: string;
    };
    fontSizes: {
      small: string;
      medium: string;
      large: string;
    };
  }

  export interface CustomTheme {
    title: string;
    colors: {
      primary: string;
      secundary: string;

      background: string;
      text: string;
    };
  }
}

Dentro no nosso arquivo tsconfig.json vamos adicionar o seguinte atributo.

....
"files": [
    "src/styles/styled.d.ts"
  ]

Vamos rapidinho criar um estilo global para a aplicação, crie o arquivo global.ts dentro de src/styles

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }

  body {
    background: #fff;
    color: black;
  }

  h1, h2, h3, h4, h5, h6, strong {
    font-weight: 700;
  }

  button {
    cursor: pointer;
  }
`;

Agora vamos importá-lo no arquivoindex.tsx , 삭제 os arquivos de estilo.css do projeto também!

import GlobalStyles from '../styles/global';

export default function Home() {
  return (
    <>
      <GlobalStyles />
    </>
  );
}

크리안도 오스 테마스

Vamos criar os temas agora! Dentro da 파스타src/styles vamos criar uma 파스타themes e nela um arquivo dark.ts(para o dark mode) o arquivo light.ts para o(light mode jura?) e um arquivo index.ts.

O arquivo dark.ts terá as seguintes cores (isso você 결정 de acordo com o seu design)

export default {
  title: 'dark',

  colors: {
    primary: '#161616',
    secundary: '#555',

    background: '#333',
    text: '#fff',
  },
};

O arquivo light.ts terá as seguintes cores

export default {
  title: 'light',

  colors: {
    primary: '#666',
    secundary: '#777',

    background: '#fff',
    text: '#333',
  },
};

Arquivo index.ts será responsável por misturar as cores de cada tema com o que seria comum entre os dois, 예: tamanho de fonte.

import { DefaultTheme, CustomTheme } from 'styled-components';
import dark from './dark';
import light from './light';

const defaultTheme = {
  fontSizes: {
    small: '16px',
    medium: '18px',
    large: '20px',
  },
};

function combineTheme(theme: CustomTheme): DefaultTheme {
  return { ...defaultTheme, ...theme };
}

export { combineTheme, dark, light };

Aplicando os temas!

Agora que já criamos nossos temas vamos importá-los e fazer as trocas dinâmicas de temas, em src/pages vamos fazer algumas alterações no nosso index.tsx , mas antes vamos adicionar um componente de switch para ficar mais estiloso já que estamos falando de temas , portanto, escreve yarn add react-switch 노스터미널

import React, { useState } from 'react';
import { DefaultTheme, ThemeProvider } from 'styled-components';
import Switch from 'react-switch';
import { combineTheme, dark, light } from '../styles/themes';
import GlobalStyles from '../styles/global';

const Home: React.FC = () => {
  const [theme, setTheme] = useState<DefaultTheme>(combineTheme(light));

  const toggleTheme = () => {
    setTheme(theme.title === 'light' ? combineTheme(dark) : combineTheme(light));
  };

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <Switch checked={theme.title === 'dark'} onChange={toggleTheme} />
    </ThemeProvider>
  );
};

export default Home;

Agora vamos em src/styles no nosso arquivo global.ts e vamos fazer as seguintes alterações!

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }

  body {
    background: ${props => props.theme.colors.background};
    color: ${props => props.theme.colors.text};
    font-size: ${props => props.theme.fontSizes.small}
  }

  h1, h2, h3, h4, h5, h6, strong {
    font-weight: 700;
  }

  button {
    cursor: pointer;
  }
`;

급히!!! O resultado final ficará assim

Projeto no Github

Reference

이 문제에 관하여(🎨 라이트 모드, 다크 모드, 테마 커스터마이즈, Styled-components, NextJS, Typescript.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jjairojr/light-mode-e-dark-mode-e-temas-customizados-com-styled-components-e-nextjs-com-typescript-1pmh

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

범프 노드 2.2.0에서 2.3.0으로 가져오기

기념으로 처음으로 milkcoa Meetup에 올랐습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다