스타일이 지정된 구성 요소

스타일이 적용된 구성 요소는 환경을 고려하지 않고 React que usa o conceito(CSS in JS), o CSS é gerado a partir de arquivos javascript, o styled retorna componentes React estilizados.

Algumas 유리한 점:

Styled-components gera nomes de classe exclusivos para seus estilos( estilos escopados )

Melhor manutenabilidade pois estilo está vinculado a um componente específico.

CSS dinâmico baseado em props, aumentando flexibilidade de forma simples.

Sintaxe do CSS는 공급업체 접두어 inserido de forma automática를 순수하게 합니다.

Você obtém todos esses benefícios enquanto ainda escreve o CSS que conhece.

설치

Após iniciar um projeto com um template como o CRA , vamos instalar o 스타일 구성 요소.

# com npm
npm install --save styled-components

# com yarn
yarn add styled-components

스타일 유틸리티 tagged template literals que permite interpolação de código JS na criação dos estilos, o retorno da função styled.tag é a criação de um componente React estilizado.

이름 구성요소의 예 제목 Title que renderiza uma tag h1 com alguns estilos.

import styled from 'styled-components';

export const Title = styled.h1`
  font-size: 1.5rem;
`;

Para utiliza-lo apenas import em outro arquivo e use como o exemplo abaixo:

import Title from './styles'; // insira o caminho para o arquivo

const App = () => {
  return (
     <Container> 
      <Title> Algum título</Title>
     </Container>
  )
}

Estilização baseada em props

Podemos passar uma função interpolada para obter acesso a props e assim alterar a estilização de um componente, veja o exemplo abaixo:

const Button = styled.button`
  /* a cor é definida de acordo com a prop primary */

  background: ${props => props.primary ? "black" : "white"};
  color: ${props => props.primary ? "white" : "black"};

  padding: 0.25em 1em;
  border-radius: 3px;
`;

// So definir via props o tipo do botão e a estilização é definida
render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

에스텐덴도 스타일로스

Podemos estender estilo de um componente, para isso precisamos passar o componente como parâmentro do construtor styled, conforme exemplo abaixo:

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

Usa todos os estilos de Button acrescendo apenas color e border-color diferentes.

도우미 키프레임 e css

O styled disponibiliza a função keyframes para criação de animações, essa gera uma instância única que você pode usar em todo o seu aplicativo.

import { keyframes, css } from 'styled-components';

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

//  adicionado no componente estilizado
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

// usado no seu componente
render(
  <Rotate>&lt; 💅🏾 &gt;</Rotate>
);

Para criar trechos de código de estilização isolado você pode usar o função css, vamos ao example.

...
const rotationAnimation = css`
  animation: ${rotate} 2s linear infinite;
`

Definindo estilos globales

O GlobalStyle é uma função onde definimos o css que reseta e padroniza regras globalis,essas regras afetam toda árvore de componentes pois definimos geralmente noApp , 예를 들어 마진, 패딩 등을 재설정합니다. Essa função retornaum componente que inserimos no componente de mais alto nível.

예시:

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }
  body {
    background: #312e38;
    color: #fff;
    -webkit-font-smoothing: antialiased;
  }
  body, input, button {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
  }
  h1, h2, h3, h4, h5, h6, strong {
    font-weight: 500;
  }
  button {
    cursor: pointer;
  }
`;

추가 구성 요소 없음 App ...

import React from 'react';
import GlobalStyle from './styles/global';

function App() {
  return (
    <>
      <GlobalStyle />
    </>
  );
}

export default App;

ThemeProvider 및 useTheme

O 스타일 구성요소 disponibiliza um componente ThemeProvider 컨텍스트 API를 활용하여 구성 요소에 액세스할 수 있습니다.

O Provider possui um atributo theme onde é definido o tema que sera disponibilizado para os componentes children.

import { ThemeProvider } from 'styled-components';

// Componente App
const App = () => {
  const theme = {
    bg: '#333333'
    fg: '#f5f5f5'
  }

  <ThemeProvider theme={theme}>     
    <Button>Theme</Button> 
  </ThemeProvider>
}

...

// Button - estilizado com acesso a prop theme do provider
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};

  font-size: 1em;
  margin: 1em;
`;

소품을 통해 액세스할 수 있는 항목은 ThemeProvider 없이 테마를 정의할 수 있으며, 이는 ThemeProvider에서 사용할 수 있으며 Dark e Light e Alternar o Valor는 Theme 공급자와 다를 수 있습니다.

O hook useTheme concede acesso ao contexto do ThemeProvider, ou seja, tudo que é disponibilizado no atributo theme também é disponibilizado para acesso via hook.

Veja aqui um exemplo de toggle theme com a criação de um novo contexto para isolar lógicas pertinentes ao tema da aplicação, incluindo usando o localStorage para armazena o tema escolhido.

감사합니다!

Documentação Oficial - Styles Components

Repositório com exemplos

Veja também:

_{Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.}

나 시감 :)

| github