نحوه استفاده از Styled Components در React

این آموزش سریع را دنبال کنید و با مزایای یک ظاهر طراحی مبتنی بر کامپوننت آشنا شوید.

با استفاده از React، ذخیره سبک‌های خود در یک فایل CSS معمولی است. این امر می‌تواند مکان یابی استایل را برای اجزای خاص دشوار کند، به خصوص زمانی که روی یک پروژه بزرگ کار می‌کنید. با کامپوننت های استایل، یافتن استایل برای یک جزء خاص آسان است زیرا آنها در همان فایل کامپوننت هستند.

بیایید نحوه تنظیم و ادغام کامپوننت های سبک در برنامه React خود را ببینیم.

نصب کتابخانه styled-components

با اجرای این دستور در ترمینال خود می توانید styled-components را نصب کنید:

npm i styled-components

برای نصب کامپوننت های سبک با استفاده از نخ، اجرا کنید:

yarn add styled-components

ایجاد یک کامپوننت سبک

یک کامپوننت استایل شده دقیقاً مانند یک مؤلفه استاندارد React با استایل است. اجزای سبک دارای مزایا و معایب مختلفی هستند که برای استفاده صحیح باید در نظر گرفته شوند.

نحو کلی به این صورت است:

import styled from "styled-components";
 
const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`

در اینجا استایل را از کتابخانه styled-component وارد می‌کنید. تابع styled یک روش داخلی است که کد جاوا اسکریپت را به CSS واقعی تبدیل می کند. ComponentName نام مؤلفه استایل دهی شده است. DOMElementTag عنصر HTML/JSX است که قصد دارید به آن استایل بدهید، مانند div، span، button و غیره.

برای ایجاد یک دکمه استایل با استفاده از یک کامپوننت سبک، ابتدا باید یک کامپوننت React حاوی یک عنصر دکمه ایجاد کنید.

اینطوری:

import React from "react";

function Button() {
    return (
        <button>Welcome!!!</button>
    )
}

اکنون می توانید با استفاده از styled-components یک استایل برای دکمه ایجاد کنید:

import styled from "styled-components";

const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

با کنار هم قرار دادن همه چیز، باید تگ دکمه را با مولفه StyledButton جایگزین کنید:

import styled from "styled-components";
import React from "react";

const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function Button() {
    return (
        <StyledButton>Welcome!!!</StyledButton>
    )
}

سبک های تودرتو

همچنین می‌توانید هنگام کار با مؤلفه‌های استایل‌گذاری شده، استایل‌ها را تودرتو کنید. تودرتو کردن اجزای استایل‌دار کمی شبیه به استفاده از زبان برنامه افزودنی SASS/SCSS است. اگر یک مؤلفه حاوی چندین تگ عنصر باشد و بخواهد هر تگ را به صورت جداگانه استایل کند، می‌توانید استایل‌ها را تودرتو کنید.

مثلا:

import React from 'react';

function App() {
    return (
        <div>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </div>
    )
}

این کد یک جزء حاوی یک عنصر h1 و یک عنصر p ایجاد می کند.

می‌توانید این عناصر را با استفاده از ویژگی استایل‌سازی تودرتوی مؤلفه‌های مدل‌دهی شده استایل دهید:

import React from 'react';
import styled from 'styled-components';

const StyledApp = styled.div`
    color: #333333;
    text-align: center;

    h1 {
        font-size: 32px;
        font-style: italic;
        font-weight: bold;
        letter-spacing: 1.2rem;
        text-transform: uppercase; 
    }

    p {
        margin-block-start: 1rem;
        font-size: 18px;
    }
`

function App() {
    return (
        <StyledApp>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </StyledApp>
    )
}

این کد از یک کامپوننت استایل شده استفاده می کند و استایلی را برای تگ های h1 و p قرار می دهد.

ایجاد و استفاده از متغیرها

توانایی ایجاد متغیرها یکی از ویژگی های قابل توجه کتابخانه styled-components است. این توانایی یک استایل پویا را ارائه می دهد که در آن می توانید از متغیرهای جاوا اسکریپت برای تعیین سبک ها استفاده کنید.

برای استفاده از متغیرها در styled-components، یک متغیر ایجاد کنید و یک مقدار ویژگی CSS به آن اختصاص دهید. سپس می توانید از آن متغیر مستقیماً در CSS خود استفاده کنید، به عنوان مثال:

import styled from "styled-components";

const MainColor = "red";

const Heading = styled.h1`
    color: ${MainColor};
`;

function App() {
    return (
        <>
            <Heading>Hello World!</Heading>
        </>
    );
}

در بلوک کد بالا، متن “Hello World!” به رنگ قرمز نمایش داده می شود.

توجه داشته باشید که این مثال به سادگی از یک متغیر استاندارد جاوا اسکریپت در قالب تحت اللفظی در ارتباط با مولفه استایل شده استفاده می کند. این روشی متفاوت از استفاده از متغیرهای CSS است.

گسترش سبک ها

پس از ایجاد یک کامپوننت سبک، از کامپوننت استفاده خواهید کرد. ممکن است بخواهید در برخی شرایط تفاوت های ظریف ایجاد کنید یا استایل بیشتری به آن اضافه کنید. در مواردی مانند این، می توانید استایل ها را گسترش دهید.

برای گسترش استایل‌ها، مولفه styled را در سازنده styled() قرار می‌دهید و سپس هر سبک اضافی را اضافه می‌کنید.

در این مثال، مولفه PrimaryButton استایل مولفه Button را به ارث می برد و رنگ پس زمینه متفاوت آبی را اضافه می کند.

import styled from "styled-components";
import React from "react";

const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

const PrimaryButton = styled(Button)`
    background-color: blue;
`

function App() {
    return (
        <Button>Welcome</Button>
        <PrimaryButton>Hello There!</PrimaryButton>
    )
}

همچنین می‌توانید تگ‌هایی را که یک مؤلفه سبک‌دهی‌شده ارائه می‌کند با استفاده از به‌عنوان پایه تغییر دهید.

as prop به شما امکان می‌دهد عنصر HTML/JSX زیربنایی را مشخص کنید که کامپوننت استایل‌دهی شده به‌عنوان آن ارائه می‌شود.

مثلا:

import styled from "styled-components";
import React from "react";

const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button as='a' href='#'>Welcome</Button>
    )
}

این کد مولفه Button را به عنوان یک عنصر نمایش می دهد و ویژگی href آن را روی “#” تنظیم می کند.

ایجاد سبک های جهانی

کامپوننت‌های استایل‌شده معمولاً به یک مؤلفه اختصاص داده می‌شوند، بنابراین ممکن است از خود بپرسید که چگونه برنامه را به عنوان یک کل استایل کنید. شما می توانید برنامه را با استفاده از یک ظاهر طراحی جهانی استایل دهید.

Styled-Components یک تابع createGlobalStyle را ارائه می دهد که به شما امکان می دهد سبک ها را به صورت جهانی اعلام کنید. CreateGlobalStyle محدودیت استایل با محدوده کامپوننت را حذف می کند و به شما امکان می دهد سبک هایی را که برای هر مؤلفه اعمال می شود، اعلام کنید.

برای ایجاد سبک های جهانی، تابع createGlobalStyle را وارد کرده و سبک های مورد نیاز خود را اعلام می کنید.

مثلا:

import {createGlobalStyle} from 'styled-components';

const GlobalStyles = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #343434;
        font-size: 15px;
        color: #FFFFFF;
        font-family: 'Montserrat', sans-serif; 
    }
`

export default GlobalStyles;

سپس مؤلفه GlobalStyles را به مؤلفه برنامه خود وارد کرده و آن را رندر می کنید. رندر کردن مؤلفه GlobalStyles در مؤلفه برنامه، استایل ها را در برنامه شما اعمال می کند.

اینطوری:

import React from 'react';
import GlobalStyles from './Global';

function App() {
    return (
        <div>
            <GlobalStyles />
        </div>
    )
}

بیشتر به اجزای سبک

شما یاد گرفته اید که چگونه کامپوننت های سبک را در برنامه React خود راه اندازی، نصب و استفاده کنید. کتابخانه styled-components یک روش کارآمد برای استایل دادن به برنامه React شما است. بسیاری از ویژگی‌های مفید را ارائه می‌کند که به انعطاف‌پذیری در استایل و استایل پویا اجازه می‌دهد.

کامپوننت‌های استایل‌دار زیادی مانند انیمیشن‌ها وجود دارد و React یک چارچوب بزرگ است که علاوه بر آن چیزهای زیادی برای یادگیری دارد.

منبع مقاله