styled
1.0.0
RECT를위한 최소 CSS-in-JS 스타일 구성 요소 솔루션.
비 데스 인 것들도 있습니다.
as , .withComponent() 메소드).attrs() 메소드)defaultProps 사용하십시오. import { styled } from '@minstack/styled' ;태그 이름을 사용하여 모든 HTML 요소 유형을 스타일링하십시오. 스타일의 구성 요소는 HTML 요소가 지원하는 것과 동일한 소품 (전달 된 Refs 포함)을 모두 지원합니다.
const StyledComponent = styled ( 'div' ) `
color: black;
` ;태그 이름 메소드 스타일도 지원됩니다.
const StyledComponent = styled . div `
color: black;
` ; 스타일 className 속성을 수용하거나 이미 스타일의 구성 요소의 스타일을 확장하는 반응 구성 요소.
const StyledComponent = styled ( Component ) `
color: black;
` ; 템플릿 문자열의 일반 매개 변수를 설정하여 스타일 구성 요소에 추가 속성을 추가 할 수 있습니다. 일반적으로 스타일 속성은 스타일링에만 사용됨을 나타 내기 위해 $ 로 접두사를해야합니다. $ 문자로 시작하는 모든 속성 이름은 속성으로 기본 HTML 요소로 전달되지 않습니다.
interface ComponentStyleProps {
$font ?: string ;
}
const StyledComponent = styled ( 'div' ) < ComponentStyleProps > `
font-family: ${ ( props ) => props . $font } ;
` ; styled.global 사용하여 글로벌 스타일 구성 요소를 만들려면 글로벌 유틸리티를 사용하십시오.
const GlobalStyle = styled . global `
body,
html {
margin: 0;
padding: 0;
}
` ;스타일 속성도 글로벌 스타일에 추가 할 수 있습니다.
interface GlobalStyleProps {
$font ?: string ;
}
const GlobalStyle = styled . global < GlobalStyleProps > `
body,
html {
font-family: ${ ( props ) => props . $font } ;
}
` ; 키 프레임 또는 글꼴 패스 정의는 다른 스타일을 정의하는 것과 동일합니다. 그들은 특정 구성 요소에 범위를 두지 않기 때문에 아마도 글로벌 스타일로만 사용해야합니다. 이름 충돌을 방지하려면 포함 된 getId 유틸리티를 사용하여 CSS-SAFE 고유 이름을 생성하십시오.
const openSansFont = getId ( 'font/open-sans' ) ;
const slideInAnimation = getId ( 'keyframes/slide-in' ) ;
const GlobalStyle = styled . global `
@font-face {
font-family: ${ openSansFont } ;
src: url('/fonts/OpenSans-Regular-webfont.woff') format('woff');
}
@keyframes ${ slideInAnimation } {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
` ;
const StyledComponent = styled ( 'div' ) `
font-family: ${ openSansFont } ;
animation-name: ${ slideInAnimation } ;
` ; 테마를 createStyled 유틸리티에 반환하는 테마 후크 (또는 기능)를 전달하십시오. 그런 다음 두 번째 인수가 스타일링 된 템플릿 문자열 기능 값으로 전달됨에 따라 테마 값을 사용할 수 있습니다.
// File: styled-with-theme.ts
import { createStyled } from '@minstack/styled' ;
export const styled = createStyled ( useTheme ) ; 강력하게 입력 한 styled 인스턴스를 만듭니다. 내장 인스턴스 대신이 인스턴스를 사용하십시오.
import { styled } from './styled-with-theme' ;
const ThemedComponent = styled ( 'div' ) `
color: ${ ( props , theme ) => theme . fgColor } ;
background-color: ${ ( props , theme ) => theme . bgColor } ;
` ; 모든 CSS 플러스 중첩이 지원됩니다.
스타일을 HTML 요소에 직접 적용하거나 스타일이있는 구성 요소에 적용하려면 태그가 지정된 템플릿의 최상위 수준 (주변 블록 없음)의 CSS 속성을 사용하십시오.
const StyledComponent = styled ( 'div' ) `
color: red;
` ;최상위 CSS 속성은 동적 스타일 클래스 선택기로 래핑됩니다.
. _rmsds7y13d_ {
color : red;
}CSS 규칙 블록을 사용하여 스타일 구성 요소의 어린이 스타일을 스타일링하십시오.
const StyledComponent = styled ( 'div' ) `
.child {
color: blue;
}
` ;스타일링 된 다이나믹 클래스는 모든 셀렉터에게 자동으로 선불되어 "스코프다".
. _rmsds7y13d_ . child {
color : blue;
}모든 스타일 구성 요소 (글로벌 스타일 제외)는 선택기로 사용할 수 있습니다.
const StyledComponentA = styled ( 'div' ) `
color: blue;
` ;
const StyledComponentB = styled ( 'div' ) `
${ StyledComponentA } {
background-color: yellow;
}
` ; 각 스타일의 구성 요소에는 생성시 생성되는 고유 한 정적 클래스가 있습니다. 스타일링 된 구성 요소의 toString() 메소드는 해당 정적 클래스의 선택기 문자열 (예 : "._rmsss7y13d_" )을 반환합니다.
. _rmsds7y13d_ . _rmsss7y13d_ {
color : red;
} 정적 클래스는 구성 요소의 디스플레이 이름, 스타일 템플릿의 정적 부분, 상속 된 정적 클래스 (다른 스타일 구성 요소를 확장 할 때) 및 동일한 "ThumbPrint"를 공유하는 이전에 생성 된 구성 요소의 수에서 생성됩니다. 대부분의 경우 SSR 및 클라이언트 렌더링에서 정적 클래스를 안정적으로 만들어야합니다. 정적 클래스 SSR 문제가 발생하면 아마도 불안정한 생성 순서가있는 동일한 지문이있는 구성 요소 때문일 수 있습니다. .withConfig() 메소드를 사용하여 displayName 변경하여 문제가있는 구성 요소의 지문을 독특하게 만듭니다.
const StyledComponent = styled . div . withConfig ( { displayName : 'StyledComponent' } ) `
color: red;
` ;더 복잡한 선택기를 생성하기 위해 둥지 규칙 블록.
const StyledComponent = styled ( 'div' ) `
.child {
color: blue;
.grandchild {
color: green;
}
}
` ;스타일링 된 다이나믹 클래스가 최상위 선택기로 선정되는 것처럼, 부모 선택기도 자식 선택기에게 전제됩니다.
. _rmsds7y13d_ . child {
color : blue;
}
. _rmsds7y13d_ . child . grandchild {
color : green;
} 학부모 선택기 참조 ( & )는 SCSS/SASS에서 동일한 방식으로 작동합니다. 한 가지 추가 세부 사항은 부모 선택기가 스타일 루트 (부모 블록 안에 중첩되지 않음)에서 사용될 때 스타일의 암시 적/가상 부모 블록 선택기 인 현재 스타일의 고유 한 스타일 클래스를 지칭한다는 것입니다.
const StyledComponent = styled ( 'div' ) `
&& {
color: red;
}
&:hover {
color: blue;
}
.parent & {
color: green;
}
` ; 모든 CSS AT-RULES가 지원됩니다 ( <style> 요소 내부에서 허용되지 않는 @charset 제외).
const StyledComponent = styled ( 'div' ) `
@media screen and (min-width: 900px) {
color: red;
}
.child {
@media screen and (min-width: 600px) {
.grandchild {
color: blue;
.adopted & {
color: green;
}
}
}
}
` ;AT-Rules는 필요에 따라 들어 올리며, 상위 선택기는 개입 AT-RULE없이 동일한 방식으로 처리됩니다.
@media screen and ( min-width : 900 px ) {
. _rmsds7y13d_ {
color : red;
}
}
@media screen and ( min-width : 600 px ) {
. _rmsds7y13d_ . child . grandchild {
color : blue;
}
. adopted . _rmsds7y13d_ . child . grandchild {
color : green;
}
} CSS 속성 값이 "빈"(빈 문자열, false , null , undefined 또는 "" ) 인 경우 전체 속성은 스타일에서 생략됩니다.
const StyledComponent = styled ( 'div' ) `
color: ${ null } ;
background-color: red;
` ;컬러 속성은 값이 없기 때문에 포함되지 않습니다.
. _rmsds7y13d_ {
background-color : red;
} 스타일에는 블록 ( /* */ ) 및 라인 주석 ( // )이 모두 포함될 수 있습니다. 렌더링 된 스타일 시트에는 댓글이 포함되지 않습니다.
const StyledComponent = styled ( 'div' ) `
// This is a comment.
/* And so...
...is this. */
` ; styled.string 태그 템플릿 함수는 모든 값이 보간 된 간단한 스타일 문자열을 반환합니다. 정적 값 만 허용됩니다 (함수 없음). 빈 속성 값 ( null , undefined , false 및 "" )은 스타일링 된 구성 요소에서 동일한 방식으로 작동하며 속성을 생략하게합니다.
const fontHelper = styled . string `
font-family: Arial, sans-serif;
font-weight: 400;
font-size: ${ size } ;
` ;
// Then use in a styled component or another helper.
const StyledComponent = styled ( 'div' ) `
${ fontHelper }
color: red;
` ; styled.string 헬퍼는 부작용이없고 작업이 거의 없으므로 기능에 사용하는 것이 안전합니다.
const shadow = ( depth : number ) => {
return styled . string `
-moz-box-shadow: 0 ${ depth } px ${ depth } px black;
-webkit-box-shadow: 0 ${ depth } px ${ depth } px black;
box-shadow: 0 ${ depth } px ${ depth } px black;
` ;
} ;
// Then use in a styled component or another helper.
const StyledComponent = styled ( 'div' ) < { $shadowDepth : number } > `
${ ( props ) => shadow ( props . $shadowDepth ) }
color: red;
` ; StyledTest 래퍼를 사용하여 안정적인 클래스 이름과 스타일 정보가있는 스냅 샷을 생성하십시오.
const container = render ( < MyStyledComponent /> , { wrapper : StyledTest } ) ;
expect ( container ) . toMatchSnapshot ( ) ; // Snapshot
<div>
<div
class="_test-dynamic-0_ _test-static-0_"
>
Hello, world!
</div>
<style>
._test-dynamic-0_ {
padding: 1rem;
}
</style>
</div>
StyledProvider 기본 cache , manager 및 renderer 무시할 수 있습니다. 기본 작업에는 제공자가 필요하지 않습니다.
const cache = createStyledCache ( ) ;
const manager = createStyledManager ( ) ;
const renderer = createStyledRenderer ( ) ;
render (
< StyledProvider cache = { cache } manager = { manager } renderer = { renderer } >
< App />
</ StyledProvider > ,
) ; StyledTest 구성 요소는 세 가지 리소스의 테스트 버전을 주입하여 클래스 이름을 대체하고 스타일을 캡처하는 세 가지 리소스의 테스트 버전을 주입하는 사전 구성된 StyledProvider 입니다.
참고 : 제공된 캐시, 관리자 및 렌더러는 스타일 구성 요소의 수명 동안 변경해서는 안됩니다. 돌연변이되면 오류가 발생하거나 생산에 기록됩니다.
createSsrStyledManager 및 StyledProvider 사용하여 서버에서 응용 프로그램을 렌더링 할 때 스타일을 캡처하십시오.
const manager = createSsrStyledManager ( ) ;
const html = renderToString (
< StyledProvider manager = { manager } >
< App />
</ StyledProvider > ,
) ;
const html = `
<!doctype HTML>
<html>
<head>
${ manager . getStyleTags ( ) }
</head>
<body>
<div id="root">
${ html }
</div>
</body>
</html>
` ; SSR 관리자의 getStyleTags() 메소드는 <style> 태그 만 포함하는 단일 HTML 문자열을 반환합니다. getStyleElement() (React Elements Array) 및 getCss() (CSS Strings Array) 메소드도 있습니다.
createStyledManager (또는 createSsrStyledManager )와 StyledProvider 사용하여 모든 주입 된 스타일에 nonce 설정하십시오.
const manager = createStyledManager ( nonce ) ;
render (
< StyledProvider manager = { manager } >
< App />
</ StyledProvider > ,
) ; | 특징 | Minstack 스타일 | 구버 | 스타일링 된 구성 요소 | 감정 | |
|---|---|---|---|---|---|
| 도서관 | |||||
| 번들 크기 (약 KB) [1] | 2.8 | 1.2 | 13.3 | 9.1 | |
| 제로 의존성 | ? | ? | ? | ? | |
| TypeScript Native | ? | ? | ? | ? | |
| API | |||||
| 태그 템플릿 스타일 | ? | ? | ? | ? | |
| 동적 스타일 | ? | ? | ? | ? | |
| 객체 스타일 | ? | ? | ? | ? | |
| 글로벌 스타일 | ? | ? | ? | ? | |
다형성 ( as ) | ? | ? | ? | ? | |
속성 매핑 ( attrs ) | ? | ? | ? | ? | |
| 테마 [2] | ? | ? | ? | ? | |
| SSR | ? | ? | ? | ? | |
| 스냅 샷 테스트 | ? | ? | ? | ? | |
| 스타일 | |||||
| 기본 CSS 구문 [3] | ? | ? | ? | ? | |
CSS @media | ? | ? | ? | ? | |
CSS @keyframes | ? | ? | ? | ? | |
CSS @font-face | ? | ⭕ | ⭕ | ? | |
CSS @import | ? | ⭕ | ? | ? | |
다른 CSS @ 규칙 | ? | ⭕ | ⭕ | ⭕ | |
| 공급 업체 접두사 [4] | ? | ? | ? | ? | |
| 규칙 중첩 | ? | ? | ? | ? | |
부모 선택자 ( & ) | ? | ? | ? | ? | |
| 스타일의 구성 요소 선택기 [5] | ? | ? | ? | ? |
styled 의 내보내기 (트리 쉐이킹, 미니 화 및 GZIP)입니다. Goober는이 솔루션과 매우 유사합니다. 빠르고 작으며 몇 가지 추가 기능 (객체 스타일 및 as 속성)을 지원합니다. 그래서 Goober의 단점은 무엇이며 왜 대신 이것을 사용합니까?
StyledTest 래퍼 구성 요소를 제공합니다.setup() 함수를 사용하므로 테마 유형이 변경되지 않습니다. 테마 유형을 확장하는 것은 선언 병합을 통해 달성 될 수 있지만 이는 다시 전 세계적이며 안전하지는 않습니다. 이 라이브러리는 강력하게 입력 된 테마를 가진 새로운 API 인스턴스를 반환하는 createStyled() 공장을 제공합니다.styled.div styled('div') )을 활성화합니다. 이 라이브러리는 styled.<tag> 컴파일 타임 지원없이.setup() 를 호출해야합니다. 이 라이브러리는 반응을 대상으로하며 preact를 사용할 때는 preact/compat 필요합니다.이 라이브러리는 의견이 있으며 Goober가 지원하는 몇 가지 기능을 제외합니다. 이는 스타일 구성 요소를 설계 할 수있는 대체 방법의 수를 줄여 코드 일관성을 높이고 전반적인 더 나은 개발자 경험 (DX)을 제공하는 것입니다. 동일한 일을 달성하기위한 두 가지 다른 방법에 대한 지원을 제거하면 라이브러리 크기 및 런타임 오버 헤드가 개선 된 핵심 기능으로 감소 및/또는 할당되며 라이브러리가 전반적으로 더 많이 유지 될 수 있음을 의미합니다.
as 속성을 지원합니다. 이 라이브러리는 본질적으로 안전하지 않기 때문에 스타일 도우미 (예 : styled.string 유틸리티)를 사용하여 스타일을 재사용하는 더 나은 방법을 제공합니다.벤치 마크 구현은 Benchmark.js 스크립트를 참조하십시오.
| 도서관 | OP/S |
|---|---|
| Minstack 스타일 | 144,970 |
| 구버 | 142,028 |
| 감정 | 124,681 |
| 스타일링 된 구성 요소 | 118,072 |
getId 선택적 네임 스페이스 인수를 수락합니다 (다시 added).withConfig() 정적 메소드를 추가했습니다getId 및 동적 클래스 해시에 주요 버전을 사용하십시오styled.div styled('div') )useInsertionEffect 사용합니다styled.string 이 추가되었습니다StyledProvider 추가되었습니다createSsrStyledManager )StyledTest )getId 더 이상 논쟁을 받아들이지 않습니다styled.mixin 제거했습니다 .mixinrenderStylesToString 제거했습니다
