با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم به آموزش استفاده از CSS در React JS بپردازیم.
راه های مختلفی برای استایل دهی به React توسط CSS وجود دارد.
در این جلسه ما از روش استایل دهی داخلی (inline) و stylesheet استفاده میکنیم.
در این روش با استفاده از یک prop به نام style، کامپوننت ها را استایل دهی میکنیم. (مقادیر باید به صورت اشیا جاوا اسکریپتی باشند)
1 2 3 4 5 6 7 8 9 10 | 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 باشد.
برای مثال در html ما خاصیت background-color را داریم اما در React آن را به صورت backgroundColor مینویسیم.
مثال:
1 2 3 4 5 6 7 8 9 10 | class MyHeader extends React.Component { render() { return ( <div> <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1> <p>Add a little style!</p> </div> ); } } |
همچنین میتوانید یک شی جداگانه ایجاد کرده و مقادیر css را داخل آن قرار دهید. سپس از آن شی در style استفاده کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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> ); } } |
در این روش میتوانید کد های css خود را در فایل های جداگانه قرار داده و سپس آن را در فایل react خود import کنید.
فایلی به نام App.css ایجاد کرده و مقادیر زیر را در آن قرار دهید:
1 2 3 4 5 6 7 | body { background-color: #282c34; color: white; padding: 40px; font-family: Arial; text-align: center; } |
حال میتواند فایل بالا را در برنامه خود وارد کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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 میتوانید برای استایل دهی سفارشی برای کامپوننت های جداگانه استفاده کنید.
فایل های ماژول ها دارای پسوند module.css هستند.
فایلی به نام mystyle.module.css ایجاد کرده و کد های زیر را در آن قرار دهید.
1 2 3 4 5 6 | .bigblue { color: DodgerBlue; padding: 40px; font-family: Arial; text-align: center; } |
حاب ماژول فوق را در برنامه خود import کنید.
1 2 3 4 5 6 7 8 9 10 11 | 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 خواهیم پرداخت.
علی
بسیار عالی
سارا
بسیار عالی و روان
متشکرم