رفع مشکل استایل های inline با کتابخانه Radium

Troubleshoot Inline Styles with the Radium Library

کتابخانه Radium

در جلسه قبل نحوه تعریف کلاس های CSS را به صورت پویا بررسی کردیم و در این جلسه نوبت به استایل های inline می رسد. قبلا توضیح داده ایم که استایل های inline دارای scope هستند و علاوه بر آن می توانیم آن ها را دقیقا مانند جاوا اسکریپت و با کد ویرایش کنیم. مشکل اینجاست که چنین استایل هایی قابلیت استفاده از pseudo-selector ها (مانند hover: و...) را ندارند اما می توانیم از یک کتابخانه مشهور برای فعال کردن این قابلیت استفاده کنیم!

برای نصب این کتابخانه می توانید از command prompt ویندوز یا هر terminal دیگری که مد نظر شما است استفاده کنید. اگر از command prompt استفاده می کنید باید با دستور cd آن را به Root پروژه تان ببرید (پوشه اصلی که پروژه در آن است) اما روش راحت تر این است که از terminal موجود در خود VSCode استفاده کنیم. از منوی view در vscode گزینه terminal را انتخاب کنید. حالا با دستور npm install شروع می کنیم:

npm install --save radium

دستور save-- برای ایجاد یک ورودی جدید در package.json است تا ورژن ثابت بماند و من و شما بتوانیم از کدهای یکدیگر استفاده کنیم. پس از وارد کردن این دستور باید منتظر بمانید تا پکیج نصب شود. پکیج Radium یک کتابخانه برای react است که به ما اجازه می دهد هنگام کار با استایل های inline از pseudo-selector ها و media query ها و ... استفاده کنیم!

زمانی که مراحل نصب به پایان رسید می توانید ترمینال را ببندید. قبل از شروع کار باید radium را در هر فایلی که می خواهید از آن استفاده کنید import کنید. ما می خواهیم دکمه موجود در فایل App.js را تغییر دهیم بنابراین آن را در همین فایل وارد می کنیم:

import Radium from 'radium';

حالا باید هنگام export کردن App آن را در radium قرار دهید!

export default Radium(App);

این کار را دقیقا برای فایل Person.js هم انجام دهید.

نحوه استفاده از radium بسیار ساده است. به ثابت استایل ها در App.js نگاه کنید. برای اضافه کردن hover می توانیم بگوییم:

const style = {
      backgroundColor: 'green',
      color: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer',
      ':hover' : {
        backgroundColor : 'lightgreen',
        color : 'black'
      }
    };

در واقع باید pseudo-selector مورد نظرتان را درون یک رشته قرار دهید (مانند کد بالا) و مقدار آن را یک شیء جاوا اسکریپتی در نظر بگیرید. هر خصوصیت CSS ای که داخل این شیء باشد شامل حالت hover می شود؛ مثلا اینجا اگر روی دکمه hover شود مقدار backgroundColor برابر با lightgreen خواهد شد.

حالا می توانیم این استایل ها را داخل if نیز تغییر دهیم:

    if (this.state.showPersons) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
            return <Person
              click={() => this.deletePersonHandler(index)}
              name={person.name}
              age={person.age}
              key={person.id}
              changed={(event) => this.nameChangedHandler(event, person.id)}
            />
          })}
        </div>
      );

      style.backgroundColor = 'red';
      style[':hover'] = {
        backgroundColor: 'salmon',
        color: 'black'
      }
    }

همانطور که می بینید برای تغییر دادن مقادیر آن از براکت (علامت های [ ]) استفاده می شود. این قابلیت، قابلیتی بسیار کاربردی است و به ما اجازه می دهد از pseudo-selector ها و قابلیت های کامل CSS استفاده کنیم. در عین حال می توانیم استایل ها تحت scope مورد نظر خودمان نگه داریم.

بگذارید یکی دیگر از قابلیت های radium را بررسی کنیم: استفاده از media query ها! فایل Person.js را باز کنید و به روشی که در کد زیر می بینید یک media query تعریف کنید:

const person = (props) => {

    const style = {
        '@media (min-width: 500px)' : {
            
        }
    }

    return (
        <div className="Person">
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name} />
        </div>
    )
};

همانطور که می بینید یک رشته ایجاد کرده ایم و media query خود را در آن نوشته ایم. به طور مثال فرض کنید که می خواهیم در عرض های بیشتر از 500 پیکسل، عرض صفحه را روی 450 پیکسل نگه داریم. بنابراین:

const style = {
        '@media (min-width: 500px)': {
            width: '450px'
        }
}

حالا می توانیم آن را به کامپوننت خودمان اضافه کنیم:

return (
        <div className="Person" style={style}>
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name} />
        </div>
 )

اگر به این کامپوننت دقت کنید، متوجه می شوید که ما className را نیز داریم بنابراین استایل های آن از سمت فایل css اعمال می شوند اما استایل های inline (که media query ما است) آن ها را override می کنند.

اگر در این حالت فایل را ذخیره کنید و به مرورگر بروید، پس از کلیک روی دکمه تمام صفحه سفید می شود و در قسمت console انواع و اقسام خطاها را می بینید. این خطا می گوید:

To use plugins requiring `addCSS` (e.g. keyframes, media queries), please wrap your application in the StyleRoot component.

به زبان ساده تر اگر بخواهیم از pseudo-selector ها مانند hover استفاده کنیم مشکلی نخواهیم داشت اما اگر بخواهیم از ویژگی هایی مانند keyframe ها و یا media query ها استفاده کنیم باید تمام برنامه را در یک کامپوننت خاص قرار دهیم. این کامپوننت توسط radium ایجاد شده و نامش styleRoot است بنابراین باید آن را نیز وارد پروژه (فایل App.js) کنیم:

import Radium, { StyleRoot } from 'radium';

حالا باید تمام قسمت Return (فایل App.js) را درون این کامپوننت قرار دهیم:

return (
      <StyleRoot>
        <div className="App">
          <h1>Hi, I'm a React App</h1>
          <p className={classes.join(' ')}>This is really working!</p>
          <button
            style={style}
            onClick={this.togglePersonsHandler}>Toggle Persons
        </button>
          {persons}
        </div>
      </StyleRoot>
);

حالا اگر کدها را ذخیره کرده و به مرورگر بروید می بینید که media query ها به راحتی کار می کنند. برای تست کردن این موضوع می توانید سایز پنجره مرورگر را به راحتی کوچک کرده و به 500 پیکسل یا پایین تر برسانید.

دانلود کدهای این جلسه

بنابراین استفاده از radium یکی از راه های استفاده از تمام ویژگی های CSS و داشتن scope در استایل ها است. در قسمت بعد در مورد CSS Module ها صحبت می کنیم که یکی دیگر از راه های استایل دهی هستند.

رفع مشکل استایل‌های inline با کتابخانه‌ی Radium

Troubleshoot Inline Styles with the Radium Library

کتابخانه Radium