۳۰
تیر

جلسه ۱۱ : استفاده از CSS در React JS

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم به آموزش استفاده از CSS در React JS بپردازیم.

فهرست

مقدمه

راه های مختلفی برای استایل دهی به React توسط CSS وجود دارد.
در این جلسه ما از روش استایل دهی داخلی (inline) و stylesheet استفاده می‌کنیم.

استایل دهی داخلی (inline)

در این روش با استفاده از یک prop به نام style، کامپوننت ها را استایل دهی می‌کنیم. (مقادیر باید به صورت اشیا جاوا اسکریپتی باشند)

مثال :

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

class MyHeader extends React.Component {

render() {

return (

<div>

<h1 style={{color: "red"}}>Hello Style!</h1>

<p>Add a little style!</p>

</div>

);

}

همانطور که گفتیم، در JSX، عبارت ها و مقادیر prop ها در داخل آکولاد {} قرار می‌گیرند. از آن جایی که اشیا جاوا اسکریپت نیز داخل {} قرار می‌گیرند، بنابراین در اینجا ما شاهد دو آکولاد تو در تو هستیم.

نام های خاصیت ها به صورت camelCase هستند

از آن جایی که در استایل دهی داخلی از اشیا جاوا اسکریپتی استفاده می‌کنیم، نام خواص نیز باید به صورت camelCase باشد.

برای مثال در html ما خاصیت background-color را داریم اما در React آن را به صورت backgroundColor می‌نویسیم.

مثال:

مثال :

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

class MyHeader extends React.Component {

render() {

return (

<div>

<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>

<p>Add a little style!</p>

</div>

);

}

همچنین می‌توانید یک شی جداگانه ایجاد کرده و مقادیر css را داخل آن قرار دهید. سپس از آن شی در style استفاده کنید.

مثال :

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

class MyHeader extends React.Component {

render() {

const mystyle = {

color: "white",

backgroundColor: "DodgerBlue",

padding: "10px",

fontFamily: "Arial"

};

return (

<div>

<h1 style={mystyle}>Hello Style!</h1>

<p>Add a little style!</p>

</div>

);

}

Stylesheet

در این روش می‌توانید کد های css خود را در فایل های جداگانه قرار داده و سپس آن را در فایل react خود import کنید.

فایلی به نام App.css ایجاد کرده و مقادیر زیر را در آن قرار دهید:

مثال :

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

body {

background-color: #282c34;

color: white;

padding: 40px;

font-family: Arial;

text-align: center;

}

حال می‌تواند فایل بالا را در برنامه خود وارد کنید.

مثال :

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );
  
 
}
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

import React from 'react';

import ReactDOM from 'react-dom';

import './App.css';

class MyHeader extends React.Component {

render() {

return (

<div>

<h1>Hello Style!</h1>

<p>Add a little style!.</p>

</div>

);

}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

کد های css به کامپوننت MyHeader اعمال خواهند شد.

ماژول های CSS

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

فایل های ماژول ها دارای پسوند module.css هستند.

فایلی به نام mystyle.module.css ایجاد کرده و کد های زیر را در آن قرار دهید.

مثال :

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

.bigblue {

color: DodgerBlue;

padding: 40px;

font-family: Arial;

text-align: center;

}

حاب ماژول فوق را در برنامه خود import کنید.

مثال :

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

export default Car;

import React from 'react';

import ReactDOM from 'react-dom';

import styles from './mystyle.module.css';

class Car extends React.Component {

render() {

return <h1 className={styles.bigblue}>Hello Car!</h1>;

}

export default Car;

جلسه آموزش استفاده از CSS در React JS نیز به پایان رسید.

در جلسه بعد به آموزش استفاده از Sass در React JS خواهیم پرداخت.

QR: جلسه ۱۱ : استفاده از CSS در React JS

به اشتراک بگذارید

css در react js ,آموزش react js ,آموزش کتابخانه reactjs ,استایل ها در react js

دیدگاه کاربران

تعداد دیدگاه : 2

علی
مرداد ۵, ۱۳۹۸
بسیار عالی
پاسخ دادن
سارا
فروردین ۷, ۱۳۹۹
بسیار عالی و روان
متشکرم
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۱ : استفاده از CSS در React JS

مقدمه

استایل دهی داخلی (inline)

نام های خاصیت ها به صورت camelCase هستند

Stylesheet

ماژول های CSS

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ