Home-theater-designers
Stitches는 React 애플리케이션의 스타일을 지정하는 강력하고 유연한 방법을 제공하는 최신 CSS-in-JS 라이브러리입니다. CSS와 JavaScript의 가장 좋은 부분을 결합한 독특한 스타일 접근 방식을 제공하므로 동적 스타일을 쉽게 만들 수 있습니다.
MUO 오늘의 영상 콘텐츠를 계속하려면 스크롤하세요.
스티치 설정
다음을 사용하여 React 애플리케이션 스타일 지정 바늘 ~와 비슷하다 스타일 구성 요소 라이브러리 사용 . 스티치와 스타일 구성 요소 둘 다 JavaScript로 스타일을 작성할 수 있는 CSS-in-JS 라이브러리입니다.
React 애플리케이션의 스타일을 지정하기 전에 스티치 라이브러리를 설치하고 설정해야 합니다. npm을 사용하여 라이브러리를 설치하려면 터미널에서 다음 명령을 실행하세요.
npm install @stitches/react
또는 다음 명령으로 Yarn을 사용하여 라이브러리를 설치할 수 있습니다.
yarn add @stitches/react
스티치 라이브러리를 설치하고 나면 React 애플리케이션 스타일링을 시작할 수 있습니다.
스타일이 지정된 구성 요소 만들기
스타일이 지정된 구성 요소를 생성하기 위해 스티치 라이브러리는 다음을 제공합니다. 스타일이 있는 기능. 스타일 기능을 사용하면 CSS 스타일과 구성 요소의 논리를 결합하는 스타일 구성 요소를 만들 수 있습니다.
그만큼 스타일이 있는 함수는 두 개의 인수를 취합니다. 첫 번째는 HTML/JSX 요소이고 두 번째는 스타일을 지정할 CSS 속성이 포함된 개체입니다.
다음은 스타일이 지정된 버튼 구성요소를 만드는 방법입니다. 스타일이 있는 기능:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
});
위의 코드 블록은 단추 어두운 배경색, 회색 텍스트 색상, 테두리 반경 및 일부 패딩이 있는 구성요소입니다. kebab-case가 아닌 camelCase로 CSS 속성을 작성합니다. 이는 camelCase가 JavaScript에서 CSS 속성을 작성하는 더 일반적인 방법이기 때문입니다.
스타일이 지정된 버튼 구성 요소를 만든 후에는 이를 React 구성 요소로 가져와 사용할 수 있습니다.
예를 들어:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button>Click Me</Button>
</>
);
}
export default App;
이 예에서는 단추 의 구성 요소 앱 요소. 버튼은 전달된 스타일을 채택합니다. 스타일이 있는 함수를 사용하여 다음과 같이 만듭니다.
그만큼 스타일이 있는 함수를 사용하면 다음과 유사한 구문을 사용하여 CSS 스타일을 중첩할 수도 있습니다. SASS/SCSS 확장 언어 . 이렇게 하면 스타일을 더 쉽게 구성하고 코드를 더 쉽게 읽을 수 있습니다.
다음은 중첩 스타일 기술을 사용하는 예입니다.
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
});
이 코드는 중첩된 CSS 스타일과 의사 클래스를 사용하여 단추 요소. 버튼 위로 마우스를 가져가면 중첩된 선택기가 &:호버 버튼의 배경색과 텍스트 색상을 변경합니다.
CSS 함수를 사용한 스타일링
스타일이 지정된 구성 요소를 만드는 것이 불편하다면 바늘 도서관이 제공하는 CSS 구성요소의 스타일을 지정하기 위해 클래스 이름을 생성할 수 있는 함수입니다. 그만큼 CSS 함수는 CSS 속성이 있는 JavaScript 개체를 유일한 인수로 사용합니다.
다음은 CSS 기능:
구직자에게 그만한 가치가있는 링크 인 프리미엄
import React from "react";
import { css } from "@stitches/react";
const buttonStyle = css({
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
});
function App() {
return (
<>
<button className={buttonStyle()}>Click Me</button>
</>
);
}
export default App;
그만큼 CSS 함수는 이 코드가 버튼에 할당할 CSS 스타일을 생성합니다. 버튼스타일 변하기 쉬운. 그만큼 버튼스타일 함수는 정의된 스타일에 대한 클래스 이름을 생성한 다음 클래스 이름 소품 단추 요소.
전역 스타일 만들기
사용하여 바늘 라이브러리에서는 다음을 사용하여 애플리케이션에 대한 전역 스타일을 정의할 수도 있습니다. 글로벌CSS 기능. globalCss 함수는 전역 스타일을 생성하고 React 애플리케이션에 적용합니다.
다음을 사용하여 전역 스타일을 정의한 후 글로벌CSS , 귀하의 기능을 호출 앱 애플리케이션에 스타일을 적용하는 구성요소입니다.
예를 들어:
import React from "react";
import { globalCss } from "@stitches/react";
const globalStyles = globalCss({
body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
function App() {
globalStyles();
return <></>;
}
export default App;
이 예에서는 몸 를 사용하는 요소 글로벌CSS 기능. 호출은 배경색을 다음으로 설정합니다. #f2f2f2 그리고 텍스트 색상은 #333333 .
동적 스타일 만들기
더 강력한 기능 중 하나는 바늘 라이브러리는 동적 스타일을 생성하는 기능입니다. 의존하는 스타일을 만들 수 있습니다. 반응 소품 와 더불어 변형 열쇠. 그만큼 변형 키는 두 가지 모두의 속성입니다. CSS 그리고 스타일이 있는 기능. 원하는 만큼 구성요소의 변형을 생성할 수 있습니다.
예를 들어:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
fontFamily: "cursive",
border: "none",
variants: {
color: {
black: {
backgroundColor: "#333333",
color: "#e2e2e2",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
},
gray: {
backgroundColor: "#e2e2e2",
color: "#333333",
"&:hover": {
backgroundColor: "#333333",
color: "#e2e2e2",
},
},
},
},
});
이 코드는 단추 구성 요소 색상 변종. 그만큼 색상 변형을 사용하면 버튼 색상을 기반으로 변경할 수 있습니다. 색상 소품. 일단 생성한 후에는 단추 구성 요소를 응용 프로그램에서 사용할 수 있습니다.
예를 들어:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button color="gray">Click Me</Button>
<Button color="black">Click Me</Button>
</>
);
}
export default App;
이 애플리케이션을 렌더링하면 두 개의 버튼이 인터페이스에 표시됩니다. 버튼은 아래 이미지와 같습니다.
테마 토큰 생성
그만큼 바늘 라이브러리를 사용하면 색상, 타이포그래피, 간격 등과 같은 UI의 시각적 측면을 정의하는 디자인 토큰 세트를 만들 수 있습니다. 이러한 토큰은 일관성을 유지하고 애플리케이션의 전체 스타일을 쉽게 업데이트하는 데 도움이 됩니다.
이러한 테마 토큰을 생성하려면 createStitches 기능. 그만큼 createStitches 스티치 라이브러리의 기능을 사용하면 라이브러리를 구성할 수 있습니다. 반드시 사용하세요 createStitches 기능을 스티치.config.ts 파일 또는 스티치.config.js 파일.
다음은 테마 토큰을 생성하는 방법의 예입니다.
import { createStitches } from "@stitches/react";
export const { styled, css } = createStitches({
theme: {
colors: {
gray: "#e2e2e2",
black: "#333333",
},
space: {
1: "5px",
2: "10px",
3: "15px",
},
fontSizes: {
1: "12px",
2: "13px",
3: "15px",
},
},
});
이제 테마 토큰을 정의했으므로 이를 구성 요소 스타일에 사용할 수 있습니다.
https 편집 야후 com 구성 delete_user
import { styled } from "../stitches.config.js";
export const Button = styled("button", {
padding: " ",
borderRadius: "12px",
fontSize: "",
border: "none",
color: '$black',
backgroundColor: '$gray',
});
위의 코드 블록은 색상 토큰을 사용합니다. $회색 그리고 $블랙 버튼의 배경색과 텍스트 색상. 또한 공간 토큰을 사용합니다. 그리고 버튼의 패딩과 글꼴 크기 변수를 설정하려면 버튼의 글꼴 크기를 설정합니다.
스티치를 이용한 효율적인 스타일링
스티치 라이브러리는 React 애플리케이션의 스타일을 지정하는 강력하고 유연한 방법을 제공합니다. 스타일이 지정된 구성 요소, 동적 스타일, globalCSS와 같은 기능을 사용하면 복잡한 디자인을 쉽게 만들 수 있습니다. 소규모 또는 대규모 React 애플리케이션을 구축하든 스티치는 스타일링을 위한 탁월한 선택이 될 수 있습니다.
스티치 라이브러리의 훌륭한 대안은 감정 라이브러리입니다. Emotion은 JavaScript로 스타일을 작성할 수 있는 인기 있는 CSS-in-JS 라이브러리입니다. 사용하기 쉽고 애플리케이션에 맞는 멋진 스타일을 만드는 데 필요한 많은 기능을 제공합니다.