스타일 어셈블리: 스타일 어셈블리 + 이중 어셈블리.매크로(순풍 CSS 2.0)

react 구성 요소의 스타일을 설계할 수 있는 여러 가지 방법이 있습니다.하지만 개발자들 사이에서 두 가지 방법이 유행하고 있다.
하나는 실용 프로그램이 우선하는 CSS 프레임워크, 예를 들어 Tailwind CSS을 사용하고 다른 하나는 JS 라이브러리의 CSS, 예를 들어 styled-components을 사용하여 JS 방식으로react 구성 요소를 설계한다.
그러나 만약 우리가 둘을 합쳐서 강력한 방식으로 우리의 구성 요소를 설계한다면 어떻게 될까요?🤔

재미있죠?🤩
따라서, 이 강좌에서, 우리는react 구성 요소의 스타일을 더욱 효과적으로 설정하기 위해 그것들을 어떻게 사용하는지 보게 될 것이다.

우리가 시작하기 전에...💭

Tailwind는 태그에서 사용자 정의 설계를 직접 신속하게 구축하는 데 사용되는 유틸리티 우선 CSS 프레임워크입니다.그것은 제약을 받는 기본 실용 프로그램에서 복잡한 구성 요소를 구축하는 데 도움이 된다.twin.macro은 Tailwind CSS와 emotion, styled-components 같은 라이브러리를 결합하여 구성 요소에 더 많은 기능을 제공하는 데 도움이 되는 라이브러리입니다.
따라서 만약에 styled-components을 사용하고 있고 Tailwind CSS을 통해 당신의 스타일을 강화하고 싶거나 React 초보자이며 React 구성 요소를 디자인하는 마법을 배우고 싶다면 본고는 당신에게 적합합니다.

Note: This article is based on Tailwind CSS 2.0. It may not work with other versions of Tailwind CSS.

우리는 무엇을 건설할 것입니까?🤔

본고에서 우리는 twin.macro과 styled-components의 조합을 보여 우리의 React 구성 요소를 설계할 것이다.그 다음에 React 구성 요소의 스타일을 보다 쉽게 설정할 수 있습니다.

선결 조건📝

은 JS의 기본 지식을 반영한다.

CSS의 기본 사항

노드 버전 v14.15.1과 npm 버전 6.14.8.낮은 버전의 Node에서는 제대로 작동하지 않을 수 있습니다.

만약 당신에게 이런 것이 있다면, 우리 시작합시다🚀

시작해보도록 하겠습니다.🏁

1. 프로젝트 설정

첫 번째 단계: 응용 프로그램 만들기

먼저 다음 명령을 실행하여 create-react-app 프로젝트를 만듭니다.

npx create-react-app react-styling-tutorial

프로젝트를 만든 후 VS 코드(또는 다른 코드 편집기/IDE)에서 프로젝트를 엽니다.

2단계: 설치에 필요한 종속성

이제 다음 명령을 실행하여 프로젝트에 twin.macro, tailwindcss 및 styled-components을 설치합니다.

npm i --save twin.macro tailwindcss styled-components

다음은 나의 모든 의존항과 버전이다.

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"styled-components": "^5.2.1",
"tailwindcss": "^2.0.1",
"twin.macro": "^2.0.6",

Note: Please make sure to have the same version of dependencies to avoid errors.

3단계: 순풍 구성

위의 모든 종속성이 설치되면 다음 명령을 실행하여 tailwind.config.js 디렉토리에 src이라는 Tailwind 구성 파일을 만듭니다.

npx tailwind init src/tailwind.config.js

생성된 파일은 다음과 같습니다.

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

보시다시피 프로필은 '비어 있습니다'. 설정이 없기 때문입니다.전체 버전의 tailwind 구성을 원하는 경우 다음을 실행할 수 있습니다.

npx tailwind init src/tailwind.config.js --full

4단계: Twin 구성

이제 package.json으로 이동하여 다음 twin 구성을 추가합니다.

"babelMacros": {
    "twin": {
        "config": "./src/tailwind.config.js",
        "preset": "styled-components"
    }
},

이 구성은 Tailwind 클래스를 JS 코드에서 CSS로 변환하는 데 도움이 됩니다.
위대하다애플리케이션을 실행하여 모든 작업을 정상적으로 수행합니다.

npm start

다음은 브라우저(또는 유사한 브라우저)에서 응용 프로그램의 모양입니다.

2. 어셈블리 생성

네.먼저 네트워크 서버를 중지합시다.
현재 App.css 디렉터리에서 logo.svg, src을 삭제하고 프로젝트를 살짝 정리합니다.src 디렉토리는 다음과 같습니다.

.
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js

현재 App.js을 다음과 같이 수정했습니다.

import React from 'react';

const App = () => {
    return <h1>My App Component</h1>;
};

export default App;

이 프로그램을 다시 실행하면 오류가 없습니다.😎


위대했어다음은 components 디렉터리에 src이라는 디렉터리를 만듭니다.components 디렉터리에서 Button이라는 다른 디렉터리를 만듭니다.
현재 우리의 Button 디렉터리에 index.js 파일을 만듭니다.src 디렉토리는 다음과 같습니다.

.
|____components
| |____Button
| | |____index.js
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js

다음은 src/components/Button/index.js에서 다음과 같이 button 구성 요소를 작성했습니다.

import React from 'react';

const ButtonComponent = () => {
    return <button>Click Me!</button>;
};

export default ButtonComponent;

이제 src/App.js으로 돌아가서 ButtonComponent을 가져오겠습니다.

import React from 'react';
import ButtonComponent from './components/Button'; // new

const App = () => {
    return (
        // new
        <div> 
            <ButtonComponent />
        </div>
    );
};

export default App;

다음은 브라우저에서 응용 프로그램의 모양입니다.

저희 단추 구성 요소가 여기 있는 걸 보실 수 있어요.🤩

3. 테마 설정

네.지금까지 우리는 아주 잘했다.이제 우리 프로젝트에 주제를 설정하자.
서버를 중지하고 /src/index.css으로 이동하여 다음 css를 맨 위에 놓습니다.

:root {
    --color-primary: #4ff0c9;
    --color-secondary: #172a45;
    --color-white-alt: #ccd6f6;
}

여기에 우리는 세 개의 변수를 만들어서 색을 저장했다. 각각 --color-primary, --color-secondary, --color-white-alt이라고 명명되었다.
이제 theme의 /src/tailwind.config.js에 다음과 같이 색상을 추가합니다.

module.exports = {
    purge: [],
    darkMode: false,
    theme: {
        extend: {
            colors: { // new
                primary: 'var(--color-primary)', // new
                secondary: 'var(--color-secondary)', // new
                whiteAlt: 'var(--color-white-alt)', // new
            }, // new
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

위대하다!!!먼저 프로그램을 실행해서 모든 것이 정상인지 확인해 봅시다.

우리는 이전과 같은 결과를 얻었다🤟

4. 스타일 어셈블리

styles 디렉터리에 src 디렉터리를 만들고 StyledApp.js 디렉터리에 styles이라는 파일을 만들어서 App 구성 요소의 스타일을 설정합니다.
마지막으로 src 카탈로그는 다음과 같습니다.

.
|____components
| |____Button
| | |____index.js
|____styles
| |____StyledApp.js
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js

현재, StyledApp.js을 열고, App 구성 요소의 스타일을 작성합시다.

import tw, { styled } from 'twin.macro';

export const StyledApp = styled.div`
    ${tw`flex justify-center items-center h-screen`}
`;

이제 App.js으로 돌아가서 StyledApp을 가져오십시오.

import React from 'react';
import ButtonComponent from './components/Button';
import { StyledApp } from './styles/StyledApp'; // new

const App = () => {
    return (
        <StyledApp> {/* new */}
            <ButtonComponent />
        </StyledApp>
    );
};

export default App;

이제 화면 중앙에 있는 브라우저를 저장하고 봅니다.

타다다!!!보시다시피 App 구성요소의 세련된 디자인😎
GlobalStyles 구성요소에서도 다음과 같이 App을 사용할 수 있습니다.

import React from 'react';
import ButtonComponent from './components/Button';
import { GlobalStyles } from 'twin.macro'; // new
import { StyledApp } from './styles/StyledApp';

const App = () => {
    return (
        <div>
            <GlobalStyles /> {/* new */}
            <StyledApp>
                <ButtonComponent />
            </StyledApp>
        </div>
    );
};

export default App;

현재 우리의 응용 프로그램은 다음과 같이 보인다.
GlobalStyles으로 인해 저희 단추 구성 요소의 스타일이 바뀌었습니다.

너무 신기해!이제 ButtonComponent을 설계해 봅시다.StyledButton.js에 /src/styles이라는 다른 파일을 만듭니다.src/styles 디렉토리는 다음과 같습니다.

.
|____StyledApp.js
|____StyledButton.js

StyledButton.js에서 우리의 단추 구성 요소에 스타일을 쓰십시오.

import tw, { styled } from 'twin.macro';

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary`}
`;

그러면 /src/components/Button/index.js으로 돌아가서 다음과 같이 StyledButton을 가져옵니다.

import React from 'react';
import { StyledButton } from '../../styles/StyledButton'; // new

const ButtonComponent = () => {
    return <StyledButton>Click Me!</StyledButton>; // new
};

export default ButtonComponent;

이제 브라우저에서 우리의 스타일 단추를 볼 수 있습니다.


이제 사용자 정의 CSS를 ButtonComponent에 추가하려면 다음과 같이 /src/styles/StyledButton.js에 추가할 수 있습니다.

import tw, { styled } from 'twin.macro';

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`}; // added duration-200 (optional)

    & {
        background-color: yellow;
    }

    &:hover {
        font-size: 2rem;
    }
`;

또한 다음과 같이 theme 데이터에 직접 액세스할 수 있습니다.

import tw, { styled, theme } from 'twin.macro'; // new

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`}; // added duration-200 (optional)

    & {
        background-color: ${theme`colors.whiteAlt`}; // modified
    }

    &:hover {
        font-size: 2rem;
    }
`;

이제 너는 버튼의 배경색이 바뀐 것을 볼 수 있다.

4. 조건 스타일

상황에 따라 스타일링을 바꿔봅시다.
이를 위해 StyledButton.js을 다음과 같이 변경합니다.

import tw, { styled, theme, css } from 'twin.macro'; // modified

export const StyledButton = styled.button(() => [
    tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`,

    css`
        & {
            background-color: ${theme`colors.whiteAlt`};
        }

        &:hover {
            font-size: 2rem;
        }
    `,
]);

그것은 우리에게 이전과 같은 출력을 줄 것이다🤟
네.조건을 하나 추가합시다.
만약 isSecondary이 사실이라면, 우리는 단추의 스타일을 바꿀 것입니다.
다음은 최종 코드입니다.

import tw, { styled, theme, css } from 'twin.macro';

export const StyledButton = styled.button(({ isSecondary }) => [
    // updated
    tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`,

    css`
        & {
            background-color: ${theme`colors.whiteAlt`};
        }

        &:hover {
            font-size: 2rem;
        }
    `,

    isSecondary && tw`border-secondary hover:bg-secondary hover:text-white`, // new
]);

이제 ButtonComponent의 src/components/Button/index.js으로 돌아가 isSecondary의 StyledButton 매개 변수를 다음과 같이 전달합니다.

const ButtonComponent = () => {
    return <StyledButton isSecondary>Click Me!</StyledButton>; // modified
};

export default ButtonComponent;

정말 징그럽다!아닌가?😎

결론📋

이것은 저의 Github 환매 협의입니다. 참고로 https://github.com/devsmranjan/react-tailwindcss-styledcomponents-template
다음 프로젝트의 템플릿으로 사용할 수 있습니다🙂
제 글을 읽어주셔서 감사합니다.🙂 . 나는 네가 이곳에서 약간의 것을 배웠으면 한다.
즐거움 코드👨‍💻👩‍💻 계속해서 저의 다음 댓글을 주목해 주세요.
감사합니다!인사하는 거 잊지 마세요.♥️ 다음:)