👨‍💻 훈련자의 관점에서 반응 | 5부분-🎨 조형법

React의 스타일은 혼란스러울 수 있습니다.이것은 결코 어렵지 않지만, 많은 다른 방법이 받아들일 수 있다.정적 웹 페이지를 사용하여 나에게 내연 양식이 환영을 받지 못한다는 것을 가르쳐 주었다.빠른 style.css 파일 후에 나는 계속 전진했다.React는 다양한 방식으로 당신의 단일 응용 프로그램 (SPA) 을 설계할 수 있습니다. 예를 들어 그것을 분해하겠습니다.

🖌️ 스타일 개요🖌️

React에서 구성 요소의 스타일을 설정하는 다섯 가지 (ish) 방법을 생각해 낼 수 있습니다.

스타일시트-a의 고전 스타일시트.css.scss 등 형식

CSS 모듈 - 제한된 범위의 개별 스타일시트

CSS 프레임워크 - 직렬로 사용되는 클래스/구성 요소

JSS-JavaScript 스타일

스타일링 어셈블리 - JS의 CSS

스타일 시트

지금 스타일시트를 사용하셨으면 좋겠습니다.CodePen에서는 모든 펜에 스타일시트가 제공됩니다.react에서, 스타일시트는 보통 구성 요소나 페이지와 같은 폴더에 놓여 있습니다.예:

Project
|
+-- src
| |
| +-- components
|   |
|   +-- Nav
|     |
|     +-- index.jsx
|         style.css

그리고 우리 예시의nav는 style.css 가져오기 import './style.css' 파일을 사용합니다.이런 방법은 소프트웨어 엔지니어가 고전적인 방식으로 스타일시트를 사용하도록 허락한다.예는 다음과 같습니다.

body {
  margin: 0;
}

.nav-button {
  color: blue;
}

스타일시트는 브라우저에 최적화되기 쉽고 빠르게 다시 만들 수 있지만, 유지하기 어려울 수도 있습니다.

CSS 모듈

CSS 모듈은 같은 위치에 있기 때문에 스타일시트와 유사합니다(위의 파일 구조 참조).그것들은 서로 다른 방식으로 가져오고 로컬에서 범위를 정하기 때문에 스타일 코드를 분리하는 데 더욱 좋다.스타일시트는 일반적으로 다른 이름으로 명명됩니다.예: module.style.css.그것들은 index.jsx에서 서로 다른 방식으로 수입한다: import styles from './module.style.css'.
스타일시트에서 만든 styles 객체를 사용하여 액세스할 수 있습니다.다음 예는 그들의 사용 방법을 중점적으로 소개했다.

import React from 'react';
import styles from './module.style.css';

const Nav = () => (
  <nav className={styles.navbar}>
    <span className={styles.link}>Home</span>
  </nav>
);

export default Nav;

우리가 모듈에서 만든 모든 종류는 점 기호로 접근할 수 있다.그것들은 매우 유익하다. 왜냐하면 스타일의 역할 영역 (로컬) 은 더 이상 스타일 충돌이 존재하지 않기 때문이다. CSS는 자바스크립트에 노출되고 다시 사용할 수 있기 때문이다.반대로 전역 CSS와 혼합하기 어려워서lowerCamelCase를 사용해야 하고 웹팩이 필요합니다.

CSS 프레임워크

많은 CSS 프레임워크를 사용할 수 있습니다.모든 것은 문서와 모두가 알고 있는 특성이 있다.예를 들어 모두가 알다시피 안내는 인터넷에서 웹 개발자의 요구 사항(검색 안내 memes)이다.그것들은 매우 많다.내가 가장 좋아하는 CSS 프레임워크는 Bulma, Semantic, materialui이다.패키지 관리자와 함께 설치하고 전역적으로 가져오거나 필요에 따라 파일에 추가할 수 있기 때문에 사용하기 쉽습니다.

import React from 'react';
import {
  Button,
  Container
} from 'react-bulma-components/full';

const Nav = () => (
  <Container>
    <Button color='danger' size='large' rounded outlined>Home</Button>
  </Container>
);

export default Nav;

위의 예에서는 CSS 프레임워크에서 어셈블리를 가져오는 방법을 보여 줍니다. 이를 하나의 어셈블리로 직접 사용할 수 있습니다.이것은 미리 설계되었지만, 수식자 종류를 추가하거나 테마를 업데이트해서 변경할 수 있습니다.우리는 단추 구성 요소에 원형, 큰, 빨간색, 윤곽선을 추가하였다.
CSS 프레임워크는 사용하기 쉽고 창설할 때 접근성을 고려하여 실현하기 쉽다.그것들은 효과적으로 최적화하기 어려울 수도 있고, 보기에 신선하지 않을 수도 있고, 응용 프로그램의 크기를 증가시킬 수도 있다.

JSS 회사

스타일링 어셈블리와 유사하게 JSS는 JS/JSX 파일에서 생성됩니다.그것들은 우리가 소개한 다른 개념보다 약간 선진적이지만 할 수 있다.다음 예제에서는 JSS가 React에서 어떻게 사용되는지 보여 줍니다(예: JSS foundhere의 홈 페이지와 같습니다).

import React from 'react'
import {render} from 'react-dom'
import {createUseStyles} from 'react-jss'

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const useStyles = createUseStyles({
  myButton: {
    color: 'green',
    margin: {
      // jss-plugin-expand gives more readable syntax
      top: 5, // jss-plugin-default-unit makes this 5px
      right: 0,
      bottom: 0,
      left: '1rem'
    },
    '& span': {
      // jss-plugin-nested applies this to a child span
      fontWeight: 'bold' // jss-plugin-camel-case turns this into 'font-weight'
    }
  },
  myLabel: {
    fontStyle: 'italic'
  }
})

// Define the component using these styles and pass it the 'classes' prop.
// Use this to assign scoped class names.
const Button = ({children}) => {
  const classes = useStyles()
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

const App = () => <Button>Submit</Button>

render(<App />, document.getElementById('root'))

이런 방법은 구성 요소를 설치할 때만 사용할 수 있는 간단한 테마화와 전역 스타일을 허용한다.게으른 스타일시트는 필요할 때만 존재한다.스타일시트의 정적 요소는 모든 요소 간에 공유됩니다.그것들은 국부적인 범위를 제공했지만 학습과 읽기가 어려울 수도 있다.

스타일 구성 요소

나는 최근에 막 완성했다. (그러나 완성하지 못했다.) 나는 이곳의 새로운 투자 조합을 만들었다. shameless plug. 나는 대부분의 구성 요소를 만들기 위해 스타일화된 구성 요소를 사용한다.스타일 구성 요소 라이브러리는 패키지 관리자와 함께 설치한 다음 가져올 수 있습니다.그런 다음 라이브러리를 사용하여 구성 요소를 index.js(x) 파일에 구축합니다.다음은 내 투자조합의 한 예다.

import styled from 'styled-components';

export const Container = styled.div`
  max-width: 1280px;
  margin: 0 auto;
  width: 90%;
  @media (min-width: 601px) {
    width: 90%;
  }
  @media (min-width: 993px) {
    width: 80%;
  }
`;

위의 구성 요소는 Container로 내보내져 구성 요소로 사용할 수 있습니다.이것은 div 형식으로 나타납니다. 스타일화된 구성 요소를 테마화하기 쉬우며 설치 후 SASS에 접근할 수 있습니다.나는 npm i styled-components를 사용한 후에 일을 시작했다.약간의 학습 곡선과 성능은 부정적인 영향을 받을 수 있지만, 그들은 정말 멋진 일을 한다.

보상: 직렬 스타일링

<h1 style={{color: 'blue'}}>Hellow World</h1>

결론

워터 클리닉 스타일을 선택할 때 많은 선택이 있다.프로젝트에 사용할 수 있는 모든 스타일링 방법을 이해하는 것은 매우 중요하다.당신이 좋아하는 것을 찾아서 진정으로 그것을 잘하면 당신은 스타일링의 권세가 될 수 있다.변함없이 다음 주에 봐요~아론