우리는 모두 표준 방식에 익숙합니다. 스타일시트 연결하기 ~로 <head> HTML 문서, 맞죠? 이것은 CSS를 작성할 수 있는 여러 가지 방법 중 하나일 뿐입니다. 그러나 단일 페이지 애플리케이션(SPA), 예를 들어 React 프로젝트에서 스타일을 지정하는 것은 어떤 모습일까요?
React 애플리케이션의 스타일을 지정하는 방법에는 여러 가지가 있습니다. 일부는 전통적인 스타일과 겹치고 다른 일부는 그다지 겹치지 않습니다. 그러나 우리가 할 수 있는 모든 방법을 계산해 봅시다.
외부 스타일시트 가져오기
이름에서 알 수 있듯이 React는 CSS 파일을 가져올 수 있습니다. 프로세스는 HTML에서 CSS 파일을 연결하는 방법과 유사합니다. <head>:
- 프로젝트 디렉터리에 새 CSS 파일을 만듭니다.
- CSS를 작성합니다.
- React 파일로 가져옵니다.
이 같은 :
import "./style.css";일반적으로 다른 가져오기가 발생하는 파일의 맨 위에 있습니다.
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;이 예에서는 CSS 파일을 App.js 인사말 /Components/css 폴더에 있습니다.
인라인 스타일 작성
인라인 스타일이 유지 관리 및 기타 면에서 그다지 좋지 않다는 말을 듣는 데 익숙할 수 있지만 분명히 상황이 있습니다(여기 하나!) 의미가 있는 곳입니다. CSS는 이미 같은 파일 안에 있는 경우가 많기 때문에 React에서는 유지 관리 가능성이 그다지 문제가 되지 않습니다.
이것은 React의 인라인 스타일에 대한 매우 간단한 예입니다.
<div className="main" style={{color:"red"}}>그러나 더 나은 접근 방식은 객체를 사용하는 것입니다.
- 먼저 다양한 요소에 대한 스타일이 포함된 개체를 만듭니다.
- 그런 다음 다음을 사용하여 요소에 추가합니다.
style속성을 선택한 다음 스타일을 지정할 속성을 선택합니다.
문맥에서 보자:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;이 예에는 styles 두 개 이상의 객체를 포함하는 객체 .main class 및 다른 하나는 외부 스타일시트에서 볼 것으로 예상되는 것과 유사한 스타일 규칙을 포함하는 텍스트 입력용입니다. 그런 다음 해당 개체가 style 반환된 마크업에 있는 요소의 속성입니다.
스타일을 참조할 때 일반 HTML에서 일반적으로 사용하는 따옴표가 아닌 중괄호를 사용합니다.
CSS 모듈 사용
CSS 모듈... 도대체 그들에게 무슨 일이 있었던 걸까요? 로컬 범위 변수의 이점이 있으며 React와 함께 바로 사용할 수 있습니다. 그러나 그들은 정확히 무엇입니까?
인용 리포지토리의 문서:
CSS 모듈은 개별 CSS 파일을 CSS와 데이터로 컴파일하여 작동합니다. CSS 출력은 일반 전역 CSS이며 브라우저에 직접 삽입하거나 함께 연결하여 프로덕션 용도로 파일에 작성할 수 있습니다. 데이터는 파일에서 사용한 사람이 읽을 수 있는 이름을 전역적으로 안전한 출력 CSS에 매핑하는 데 사용됩니다.
간단히 말해서 CSS 모듈을 사용하면 각 클래스 이름에 고유한 프로그램 이름이 부여되기 때문에 충돌 없이 여러 파일에서 동일한 클래스 이름을 사용할 수 있습니다. 이것은 더 큰 응용 프로그램에서 특히 유용합니다. 모든 클래스 이름은 가져오는 특정 구성 요소에 대해 로컬로 범위가 지정됩니다.
CSS 모듈 스타일시트는 확장자가 다를 뿐 일반 스타일시트와 유사합니다(예: styles.module.css). 설정 방법은 다음과 같습니다.
- 다음을 사용하여 파일 만들기
.module.css확장자로. - 해당 모듈을 React 앱으로 가져옵니다(이전에 본 것처럼).
- 추가 할
className요소 또는 구성요소에 추가하고 가져온 스타일에서 특정 스타일을 참조합니다.
아주 간단한 예 :
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;스타일이 지정된 구성 요소 사용
당신이 사용한 적이 있습니까? 스타일 구성 요소? 꽤 유명하며 JavaScript에서 실제 CSS를 사용하여 사용자 정의 구성 요소를 빌드할 수 있습니다. styled-component는 기본적으로 스타일이 있는 React 구성 요소입니다. 일부 기능에는 고유한 클래스 이름, 동적 스타일 지정 및 각 구성 요소에 고유한 별도의 스타일이 있기 때문에 CSS의 더 나은 관리가 포함됩니다.
명령줄에 styled-components npm 패키지를 설치합니다.
npm install styled-components다음으로 React 앱으로 가져옵니다.
import styled from 'styled-components'구성 요소를 만들고 스타일이 지정된 속성을 할당합니다. 백틱으로 표시된 템플릿 리터럴의 사용에 유의하십시오. Wrapper 목적:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;위의 Wrapper 구성 요소는 해당 스타일을 포함하는 div로 렌더링됩니다.
조건부 스타일링
styled-components의 장점 중 하나는 CSS 내에서 props를 사용할 수 있는 것처럼 구성 요소 자체가 기능적이라는 것입니다. 이것은 조건문과 상태 또는 소품에 따라 스타일을 변경할 수 있는 가능성을 열어줍니다.
다음은 이를 보여주는 데모입니다.
여기서 우리는 div를 조작하고 있습니다. display 표시 상태에 대한 속성입니다. 이 상태는 클릭 시 div의 상태를 전환하는 버튼으로 제어됩니다. 이것은 차례로 두 가지 다른 상태의 스타일 사이를 전환합니다.
인라인에서 if 진술, 우리는 ? 평소 대신 if/else 통사론. NS else 부분은 세미콜론 뒤에 있습니다. 그리고 초기화된 후에 항상 상태를 호출하거나 사용하는 것을 기억하십시오. 예를 들어 마지막 데모에서 상태는 Wrapper 구성 요소의 스타일.
해피 리액트 스타일링!
그것은 포장입니다, 여러분! 우리는 React 애플리케이션에서 스타일을 작성하는 몇 가지 다른 방법을 살펴보았습니다. 그리고 그것은 하나가 나머지보다 더 나은 것과 같지 않습니다. 물론 사용하는 접근 방식은 상황에 따라 다릅니다. 이제 당신이 그것들을 잘 이해하고 React 스타일링 무기고에 많은 도구가 있다는 것을 알기를 바랍니다.
