CSS در ری اکت

امید کیانی 297 بازدید 1398/07/21
CSS در ری اکت

css در ری اکت برای استایل دادن به برنامه یا کامپوننت مورد استفاده قرار می گیرد. صفت style رایج ترین صفتی است که برای استایل دادن به برنامه مورد استفاده قرار می گیرد.

آن یک شیء جاوااسکریپت را با استفاده از قانون "camelCase" به جای یک رشته در Css می پذیرد.راه های زیادی برای اضافه کردن استایل ها به برنامه خود در ری اکت وجود دارد که در اینجا ما به طور عمده به ۴ راه که در زیر برآورد شده است،می پردازیم:

  • استایل دادن به صورت خطی (Inline Styling)
  • استفاده از فایل CSS Stylesheet) Css)
  • استفاده از ماژول CSS Module) Css)
  • Styled Components

۱-Inline Styling

Inline Styling در جاوااسکریپت به استفاده از قانون "camelCase" مشخص شده است.

مثال:

App.js

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class App extends React.Component {  
  render() {  
    return (  
      <div>  
      <h1 style={{color: "Green"}}>Hello Laraman!</h1>  
      <p>Here, you can find all CS tutorials.</p>  
      </div>  
    );  
  }  
}  
export default App;

نکته: توجه کنید که در مثال بالا ما از دو curly brace استفاده کرده ایم.<h1 style={{color: "Green"}}>Hello Laraman!</h1>

دلیل آن این است که در Jsx، عبارت های جاوااسکریپت درون یک curly brace قرار می گیرد و همچنین شیء جاوااسکریپت از curly brace استفاده می کند،بنابراین در مثال بالا برای استایل دادن از دو curly brace استفاده می کنیم.

خروجی:

نام property با استفاده از قانون camelCase:

اگر property مورد نظر دارای دو قسمت بود،برای مثال: background-color، آن باید از قانون "camelCase" پیروی کند:

مثال:

App.js

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class App extends React.Component {  
  render() {  
    return (  
      <div>  
      <h1 style={{color: "Red"}}>Hello Laraman!</h1>  
      <p style={{backgroundColor: "lightgreen"}}>Here, you can find all CS tutorials.</p>  
      </div>  
    );  
  }  
}  
export default App;

خروجی:

استفاده از شیء جاوااسکریپت

inline styling به ما اجازه می دهد تا یک شیء را با استفاده از اطلاعات مورد نظر ایجاد کرده و از آن در attribute style خود استفاده کنیم.

مثال:

App.js

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class App extends React.Component {  
  render() {  
    const mystyle = {  
      color: "Green",  
      backgroundColor: "lightBlue",  
      padding: "10px",  
      fontFamily: "Arial"  
    };  
    return (  
      <div>  
      <h1 style={mystyle}>Hello Laraman</h1>  
      <p>Here, you can find all CS tutorials.</p>  
      </div>  
    );  
  }  
}  
export default App;

خروجی:

 

۲-استفاده از فایل CSS Stylesheet) Css)

ما می توانیم استایل های خود را در یک فایل جدا با استفاده از پسوند css. قرار داده و آن را در برنامه خود import کنیم.

مثال:

App.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import './App.css';  
  
class App extends React.Component {  
  render() {  
    return (  
      <div>  
      <h1>Hello Laraman</h1>  
      <p>Here, you can find all CS tutorials.</p>  
      </div>  
    );  
  }  
}  
export default App;

App.css

body {  
  background-color: #008080;  
  color: yellow;  
  padding: 40px;  
  font-family: Arial;  
  text-align: center;  
}

Index.html

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <meta name="viewport"  
      content="width=device-width, initial-scale=1" />  
    <title>React App</title>  
  </head>  
  <body>  
    <div id="app"></div>  
  </body>  
</html>

خروجی:

 

۳-استفاده از ماژول CSS Module) Css)

آن یک فایل css است جایی که همه ی نام های کلاس ها و نام های انیمیشن ها به صورت پیش فرض در محلی قرار گرفته اند.آن تنها برای کامپوننت ها موجود است که می توانند آنها را import کنند،بدین معنی که هر استایلی که ما اضافه می کنیم نمی تواند بدون اجازه ی ما در کامپوننت های دیگر قرار بگیرد و هیچگونه نگرانی در مورد تداخل نام ها وجود ندارد.

ما می توانیم یک ماژول css را با پسوند module.css. مانند myStyles.module.css ایجاد کنیم.

مثال:

App.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import styles from './myStyles.module.css';   
  
class App extends React.Component {  
  render() {  
    return (  
      <div>  
      <h1 className={styles.mystyle}>Hello Laraman</h1>  
      <p className={styles.parastyle}>It provides great CS tutorials.</p>  
      </div>  
    );  
  }  
}  
export default App;

myStyles.module.css

.mystyle {  
  background-color: #cdc0b0;  
  color: Red;  
  padding: 10px;  
  font-family: Arial;  
  text-align: center;  
}  
  
.parastyle{  
  color: Green;  
  font-family: Arial;  
  font-size: 35px;  
  text-align: center;  
}

خروجی:

 

۴-Styled Components

Styled-components یک کتابخانه برای ری اکت است.آن از css برای طراحی یکپارچه سازی برنامه ما استفاده می کند که با ترکیبی از css و javascript نوشته شده است.

styled-components کنترل می کند:

  • بحران اتوماتیک css
  • اشکال در نام کلاس
  • حذف آسان تر css
  • استایل پویا به صورت ساده
  • نگهداری بدون دردسر

نصب

برای نصب کتابخانه ی styled-components مانند زیر عمل می کنیم:

$ npm install styled-components --save 

 مثال:

در اینجا ما یک متغیر با انتخاب یک قسمت خاص از html مانند تگ <div>،تگ <Title> و تگ <paragraph> جایی که ما attribute های استایل خود را ذخیره می کنیم،ایجاد می کنیم.اکنون ما می توانیم از نام متغیر خود به عنوان نوعی تگ در ری اکت استفاده کنیم.

App.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import styled from 'styled-components';  
  
class App extends React.Component {  
  render() {  
    const Div:any = styled.div`  
            margin: 20px;  
            border: 5px dashed green;  
            &:hover {  
            background-color: ${(props:any) => props.hoverColor};  
            }  
            `;  
    const Title = styled.h1`  
            font-family: Arial;  
            font-size: 35px;  
            text-align: center;  
            color: palevioletred;  
            `;  
    const Paragraph = styled.p`  
            font-size: 25px;  
            text-align: center;  
            background-Color: lightgreen;  
            `;  
    return (  
       <div>            
            <Title>Styled Components Example</Title>  
            <p></p>  
            <Div hoverColor="Orange">  
                 <Paragraph>Hello Laraman!!</Paragraph>  
            </Div>  
        </div>  
    );  
  }  
}  
export default App;

خروجی:

 هنگامی که mouse را بر روی تصویر حرکت می دهیم،رنگ آن تغییر می کند که در تصویر زیر قابل مشاهده است:

  

دیگر مقالات
امید کیانی 317 بازدید 1398/06/11
حمید تیموری 427 بازدید 1397/10/15
حمید تیموری 434 بازدید 1398/01/14
امید کیانی 591 بازدید 1398/02/14
امید کیانی 250 بازدید 1398/07/16


نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید