استایل ها در ری اکت

هیچ برنامه ای بدون استایل، کامل نیست. در این درس به نحوه استایل دهی کامپوننت های ری اکت توسط CSS می پردازیم.

برای استایل دهی به کامپوننت های ری اکت چندین روش وجود دارد:

1. فایل های CSS
2. استایل های درونی
3. کتابخانه های استایل دهی

فایل های CSS

استفاده از CSS برای استایل دهی به برنامه های تحت وب امری رایج است. در حقیقت CSS یک روش برای استایل دهی به عناصر HTML است که بصورت مجزا از کدهای HTML نوشته می شود.

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

به عنوان یک مثال، می خواهیم کامپوننت Header که در قسمت های قبلی با آن کار کردیم را استایل دهی کنیم.

فرض کنیدکه می خواهیم توسط CSS رنگ هدر را نارنجی کنیم. برای انجام این کار یک فایل CSS به صفحه اضافه می کنیم (توسط تگ Link) و به کامپوننت مان یک کلاس با نام .header نسبت می دهیم.

کامپوننت Header که قبلاً آن را ایجاد کرده بودیم، مطابق زیر است:

class Header extends React.Component {
  render() {
    // Classes to add to the <input /> element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className={searchInputClasses.join(' ')}
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

حال یک فایل به نام style.css در برنامه ایجاد کرده و آن را به صفحه اضافه می کنیم. این فایل style.css را در همان دایرکتوری که فایل index.HTML قرار گرفته، درج کنید.

<link rel="stylesheet" type="text/CSS" href="styles.css">

حال کد زیر را به منظور استایل دهی کامپوننت Header اضافه کنید.

.header {
  background: rgba(251, 202, 43, 1);
}
.header, .fa, .title, .searchIcon {
  color: #333333;
}

یکی از ایراداتی که به CSS وارد است، ویژگی آبشاری آن است. همان طور که می دانید CSS با مدل آبشاری کار می کنند و استایل ها از عنصر والد به عنصر فرزند اعمال می شود. اینکار در مواقعی که عنصرها از نام های کلاس مشابه هم استفاده می کنند، باعث بروز خطاهای ناخواسته ای در برنامه می شود.

استفاده از نام header برای کلاس، کار درستی نیست، چون نه تنها یک صفحه می تواند یک هدر داشته باشد، بلکه  جعبه های محتوا (content box) صفحه، مقالات یا حتی تبلیغات هم می تواند یک کلاس به نام header داشته باشند. یکی از راه های رفع این مشکل استفاده از ماژول های CSS برای تعریف نام کلاس CSS منحصر به فرد است.

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

ری اکت یک روش نه چندان جدید برای حل این مشکل ارائه داده و آن تعریف استایل های درونی در داخل کدهای jsx است.

استایل های درونی (inline styles)

اضافه کردن استایل ها به کامپوننت نه تنها ما را قادر می سازد تا بتوانیم در داخل کامپوننت ها، استایل تعریف کنیم بلکه می توانیم بصورت پویا و بسته به وضعیت (state)های مختلف در برنامه، استایل های خود را تعریف کنیم.

ری اکت به جای استفاده از یک فایل جداگانه CSS، از آبجکت های جاوا اسکریپت برای تعریف استایل استفاده می کند.

حال به کامپوننت Header بر می گردیم و اینبار برای استایل دهی به جای استفاده از کلاس های CSS، از استایل های درونی استفاده می کنیم. برای تعریف استایل های درونی در یک کامپوننت از ویژگی Style استفاده می کنیم. تمام عناصر DOM در ری اکت یک پروپرتی Style را دریافت می کنند. همچنین این پروپرتی یک آبجکت می گیرد و کلید این آبجکت همان نام استایل و مقدار استایل هم به عنوان value این کلید در نظر گرفته می شود.

برای مثال، برای افزودن یک استایل color به یک عنصر <div/> در jsx، باید مطابق زیر عمل بکنید:

const style = { color: 'blue' }
<div style={style}>
  This text will have the color blue
</div>

This text will have the color blue

دقت داشته باشید که باید استایل را در بین دو آکولاد قرار دهید، چون ما یک آبجکت جاوا اسکریپت را به داخل یک تگ template پاس می دهیم و آکولاد داخلی مربوط به آبجکت جاوا اسکریپت و آکولاد بیرونی مربوط به تگ template است.

مثال بعدی ارسال یک آبجکت جاوا اسکریپت که در خارج از کدهای jsx تعریف شده، را بهتر نشان می دهد:

render() {
  const divStyle = { color: 'blue' }
  return (<div style={divStyle}>
    This text will have the color blue
  </div>);
}

در هر کدام از این روش ها ما نمی توانیم از نام استایل های CSS استفاده کنیم (به طور مثال background-color در ری اکت نامعتبر است)، در عوض باید نام استایل ها را به فرمت camelCase بنویسید.

camelCase یک روش برای نوشتن کلمه های ترکیبی است، در این روش حرف اول هر کلمه (به جز کلمه اول) با حرف بزرگ نوشته می شود. مثل backgroundColor و linearGradient .

برای استفاده از این روش نیاز به بروزرسانی کامپوننت Header داریم، بنابراین یک پروپرتی className در قسمت استایل اضافه می کنیم.

class Header extends React.Component {
  // ...
  render() {
    // Classes to add to the <input /> element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    const wrapperStyle = {
      backgroundColor: 'rgba(251, 202, 43, 1)'
    }

    const titleStyle = {
      color: '#111111'
    }

    const menuColor = {
      backgroundColor: '#111111'
    }

    return (
      <div style={wrapperStyle} className="header">
        <div className="menuIcon">
          <div className="dashTop" style={menuColor}></div>
          <div className="dashBottom" style={menuColor}></div>
          <div className="circle" style={menuColor}></div>
        </div>

        <span style={titleStyle} className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className={searchInputClasses.join(' ')}
          placeholder="Search ..." />

        {/* Adding an onClick handler to call the showSearch button */}
        <div
          style={titleStyle}
          onClick={this.showSearch.bind(this)}
          className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

حال رنگ هدر به نارنجی تغییر می کند

کتابخانه های استایل دهی

ری اکت جامعه کاربری خیلی فعالی دارد (و این به خاطر امکانات فوق العاده این کتابخانه است). کتابخانه های استایل دهی زیادی وجود دارند که می توانیم توسط آنها استایل های خود را ایجاد کنیم. یکی از این کتابخانه ها Radium است.

اکثر این کتابخانه ها بر اساس چرخه های کاری که توسعه دهندگان ری اکت تعریف کرده اند، کار می کنند.

Radium به شما اجازه می دهد تا استایل های خودتان را بیرون از کامپوننت های ری اکت تعریف کنید. همچنین قابلیت های دیگری مثل پیشوندهای اختصاصی، پشتیبانی از مدیاکوئری ها (مثل :hover و :active و media@)، استایل دهی درونی و ... را دارا می باشد.

در این مقاله نمی توانیم بیشتر راجع به Radium صحبت کنیم، چون فراتر از حوزه این مقاله است.

حال که دانستیم چطور کامپوننت های ری اکت مان را استایل دهی کنیم، در انتخاب یک کتابخانه استایل دهی برای خودمان مشکل زیادی نخواهیم داشت.

در قسمت بعدی قابلیت های تعامل با کاربران را به کامپوننت خود اضافه می کنیم.