한 줄에 재사용 가능한 React 구성 요소를 빠르게 생성

🔴 전통적으로 재사용 가능한 요소를 기능적 구성 요소로 추출합니다.

function Button(props) {
    return (
        <button {...props} className={"inline-flex font:14" + (props.className ? ' ' + props.className : '')}>
            {props.children}
        </button>
    )
}

🟢 이제 ~80% 이하의 코드로 한 줄에 동일하게 구현합니다.

const Button = el.button`inline-flex font:14`

그런 다음 평소와 같이 적용하십시오.

export default function App() {
    return (
        <Button className="uppercase">submit</Button>
    )
}

다음과 같이 렌더링됩니다.

<button class="inline-flex font:14 uppercase">submit</button>

이 페이지에서

Features

Install

Import

Usage

Create a basic styled element

Apply additional class names

Apply class names based on properties

Transform tag names

Extend styled elements

Inspiration

Related

특징

클래스 이름으로 제어되는 스타일 요소입니다.

재사용 가능한 스타일 요소를 빠르게 만듭니다.

더 적은 코드로 스타일 요소를 만듭니다.

기존 스타일 요소를 확장합니다.

템플릿 리터럴로 클래스 이름과 문자열을 조건부로 생성합니다.

설치

npm install @master/style-element.react

수입

import el from '@master/style-element.react';

용법

syntactic sugar를 사용하여 기능적 구성 요소를 더 쉽고 빠르게 구현할 수 있습니다.

기본 스타일 요소 만들기

import React from 'react'
import el from '@master/style-element.react'

const Button = el.button`inline-flex font:14`

export default function App() {
    return (
        <Button>...</Button>
    )
}

다음과 같이 렌더링:

<button class="inline-flex font:14">...</button>

추가 클래스 이름 적용

여기에 버튼에 대해 uppercase를 추가하십시오.

const Button = el.button`inline-flex font:14`

return (
    <Button className="uppercase">...</Button>
)

다음과 같이 렌더링:

<button class="inline-flex font:14 uppercase">...</button>

속성을 기반으로 클래스 이름 적용

const Button = el.button`
    inline-flex
    font:14
    ${(props) => (props.color ? 'font:white bg:' + props.color : '')}
`

return (
    <Button color="blue">...</Button>
    <Button color="red">...</Button>
    <Button disabled>...</Button>
)

다음과 같이 렌더링:

<button class="inline-flex font:14 font:white bg:blue">...</button>
<button class="inline-flex font:14 font:white bg:red">...</button>
<button class="inline-flex font:14" disabled>...</button>

태그 이름 변환

스타일이 지정된 요소 태그 이름만 변환하려면 ''을 비워 둡니다.

const Button = el.button`inline-flex font:14` // <button>
const Anchor = el.a(Button)`` // <button> -> <a>

return (
    <Button>Button</Button>
    <Anchor href="https://css.master.co" target="blank">Anchor</Anchor>
)

다음과 같이 렌더링:

<button class="inline-flex font:14">Button</button>
<a class="inline-flex font:14" href="https://css.master.co" target="blank">Anchor</a>

⚠️ 변환할 대상은 스타일이 지정된 요소만 허용합니다.

스타일 요소 확장

const Button = el.button`inline-flex font:14`

 // extend Button with addtional class names
const Button1 = el(Button)`text:center`

// extend Button with addtional class names and transform it into <a>
const Button2 = el.a(Button)`italic`

// extend Button1 and Button2 with addtional class names
const Button3 = el(Button1)(Button2)`font:bold`

return (
    <Button>Button</Button>
    <Button1>Button 1</Button1>
    <Button2>Button 2</Button2>
    <Button3>Button 3</Button3>
)

다음과 같이 렌더링:

<button class="inline-flex font:14">Button</button>
<button class="inline-flex font:14 text:center">Button 1</button>
<a class="inline-flex font:14 italic">Button 2</a>
<button class="inline-flex font:14 text:center italic font:bold">Button 3</button>

⚠️ 확장할 대상은 스타일이 지정된 요소만 허용합니다.

영감

우리의 핵심 개념과 디자인 중 일부는 이러한 거대 기업에서 영감을 받았습니다.

템플릿 리터럴 - 구성 요소를 재사용하기 위한 구문 설탕으로 템플릿 리터럴을 사용하는 것은 Styled Components 에서 영감을 받았습니다.

관련된

@master/css - 구문이 향상된 가상 CSS 언어입니다. ~13KB

@master/literal - 템플릿 리터럴로 클래스 이름과 문자열을 조건부로 구성합니다. ~600B

Press ⭐️ star on GitHub! 마음에 든다면.