همه ما با روش استاندارد آشنا هستیم پیوند دادن یک شیوه نامه به <head> از یک سند HTML، درست است؟ این تنها یکی از چندین روشی است که ما قادر به نوشتن CSS هستیم. اما سبک دادن به چیزها در یک برنامه تک صفحه ای (SPA)، مثلاً در پروژه React، چگونه به نظر می رسد؟
به نظر می رسد راه های مختلفی برای استایل کردن یک برنامه React وجود دارد. برخی با یک ظاهر طراحی سنتی همپوشانی دارند، برخی دیگر نه چندان. اما بیایید تمام راه‌هایی را که می‌توانیم انجام دهیم، بشماریم.
وارد کردن شیوه نامه های خارجی
همانطور که از نام آن پیداست، React می تواند فایل های CSS را وارد کند. این فرآیند شبیه به نحوه پیوند دادن فایل CSS در HTML است <head>:
- یک فایل CSS جدید در فهرست پروژه خود ایجاد کنید.
- CSS بنویسید
- آن را در فایل React وارد کنید.
مثل این:
import "./style.css";این معمولاً در بالای فایل قرار می گیرد که در آن وارد کردن های دیگر انجام می شود:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;در این مثال، یک فایل CSS به یک فایل وارد شده است App.js از /Components/css پوشه.
سبک های درون خطی بنویسید
ممکن است به شنیدن این موضوع عادت کرده باشید که استایل درون خطی برای نگهداری و غیره آنقدرها هم عالی نیست، اما قطعا شرایطی وجود دارد (اینجا یکی است!) جایی که منطقی است. و قابلیت نگهداری در React مشکل کمتری دارد، زیرا CSS اغلب در داخل همان فایل قرار دارد.
این یک مثال بسیار ساده از یک استایل داخلی در React است:
<div className="main" style={{color:"red"}}>با این حال، یک رویکرد بهتر استفاده از اشیاء است:
- ابتدا یک شی بسازید که شامل سبک هایی برای عناصر مختلف باشد.
- سپس آن را با استفاده از عبارت به یک عنصر اضافه کنید
styleویژگی و سپس ویژگی برای استایل را انتخاب کنید.
بیایید آن را در زمینه ببینیم:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;این مثال حاوی الف است styles شی حاوی دو شی دیگر، یکی برای .main کلاس و دیگری برای ورودی متن، که حاوی قوانین سبک مشابه آنچه ما انتظار داریم در یک شیوه نامه خارجی ببینیم. آن اشیاء سپس به اعمال می شوند style ویژگی عناصری که در نشانه گذاری برگشتی قرار دارند.
توجه داشته باشید که برای ارجاع به سبک‌ها به جای گیومه‌هایی که معمولاً در HTML ساده استفاده می‌کنیم، از براکت‌های فرفری استفاده می‌شود.
از ماژول های CSS استفاده کنید
ماژول های CSS... چه اتفاقی برای آنها افتاد، درست است؟ آنها از مزایای متغیرهای محلی برخوردار هستند و می توانند درست در کنار React استفاده شوند. اما آنها، دوباره، دقیقا چه هستند؟
نقل قول از اسناد مخزن:
ماژول‌های CSS با کامپایل کردن فایل‌های CSS مجزا در CSS و داده‌ها کار می‌کنند. خروجی CSS یک CSS معمولی و سراسری است که می‌تواند مستقیماً به مرورگر تزریق شود یا با هم ترکیب شود و برای استفاده در یک فایل نوشته شود. داده‌ها برای نگاشت نام‌های قابل خواندن توسط انسان که در فایل‌ها استفاده کرده‌اید به CSS خروجی جهانی امن استفاده می‌شود.
به عبارت ساده‌تر، ماژول‌های CSS به ما اجازه می‌دهند تا از یک نام کلاس در چندین فایل بدون درگیری استفاده کنیم، زیرا نام هر کلاس یک نام برنامه‌نویسی منحصربه‌فرد داده می‌شود. این به ویژه در برنامه های بزرگتر مفید است. نام هر کلاس به صورت محلی به مؤلفه خاصی که در آن وارد می شود، محدود می شود.
یک شیوه نامه ماژول CSS شبیه یک شیوه نامه معمولی است، فقط با پسوند متفاوت (مثلاً styles.module.css). در اینجا نحوه تنظیم آنها آمده است:
- ایجاد فایل با
.module.cssبه عنوان پسوند. - آن ماژول را به برنامه React وارد کنید (همانطور که قبلا دیدیم)
- اضافه کردن
classNameبه یک عنصر یا جزء و ارجاع به سبک خاص از سبک های وارد شده.
مثال فوق العاده ساده:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;از کامپوننت های استایلد استفاده کنید
آیا شما استفاده کردید کامپوننت های مدل دار? این بسیار محبوب است و به شما امکان می دهد کامپوننت های سفارشی را با استفاده از CSS واقعی در جاوا اسکریپت خود بسازید. یک کامپوننت استایلد اساساً یک مؤلفه React با سبک‌های – آماده باشید – است. برخی از ویژگی ها عبارتند از نام کلاس های منحصر به فرد، استایل پویا و مدیریت بهتر CSS زیرا هر جزء دارای سبک های جداگانه خود است.
بسته styled-components npm را در خط فرمان نصب کنید:
npm install styled-componentsدر مرحله بعد، آن را به برنامه React وارد کنید:
import styled from 'styled-components'یک کامپوننت ایجاد کنید و یک ویژگی styled به آن اختصاص دهید. به استفاده از حروف الفبای الگو که با بکتیک در نشان داده شده اند توجه کنید Wrapper هدف - شی:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;بالا Wrapper کامپوننت به عنوان یک div که شامل آن سبک ها است ارائه می شود.
یک ظاهر طراحی مشروط
یکی از مزایای styled-components این است که اجزای خود عملکردی دارند، زیرا شما می توانید از props در CSS استفاده کنید. این در را به روی عبارات شرطی و تغییر سبک ها بر اساس یک حالت یا پایه باز می کند.
در اینجا یک نسخه ی نمایشی است که آن را نشان می دهد:
در اینجا، ما div را دستکاری می کنیم display ویژگی در حالت نمایش این حالت توسط دکمه ای کنترل می شود که با کلیک کردن، وضعیت div را تغییر می دهد. این به نوبه خود، بین سبک های دو حالت مختلف جابجا می شود.
در خط if عبارات، از a استفاده می کنیم ? به جای معمول if/else نحو. را else قسمت بعد از نقطه ویرگول است. و به یاد داشته باشید که همیشه حالت را پس از مقداردهی اولیه فراخوانی یا استفاده کنید. برای مثال، در آخرین نسخه نمایشی، وضعیت باید بالاتر از مقدار باشد Wrapper سبک های جزء
استایل‌سازی Happy React!
این یک بسته بندی است، مردمی! ما چندین روش مختلف برای نوشتن استایل در یک برنامه React را بررسی کردیم. و اینطور نیست که یکی بهتر از بقیه باشد. البته رویکردی که استفاده می کنید به موقعیت بستگی دارد. امیدواریم اکنون درک خوبی از آنها داشته باشید و بدانید که مجموعه‌ای از ابزارها در زرادخانه استایل‌سازی React خود دارید.
