آموزش react nativeآموزش react native
  • صفحه اصلی
  • دوره ها
    ارسال نوتیفیکیشن در React Native

    ارسال نوتیفیکیشن در React Native

    رایگان
    مشاهده
    • دوره های آموزشی
    • تله فیلم آموزشی
  • بلاگ
  • چارت آموزشی
  • تالار گفتمان
  • تماس با ما
  • درباره ما
  • کانال تلگرام
    • عضویتورود
    • سبد خرید

      0

Material UI

  • خانه
  • بلاگ
  • Material UI
  • معرفی jss و نحوه استفاده از آن در برنامه

معرفی jss و نحوه استفاده از آن در برنامه

  • ارسال شده توسط عاصفه
  • تاریخ آبان 2, 1397
  • نظرات 2 دیدگاه ها
jss

در آموزش های قبلی MaterialUI کامپوننت ها رو معرفی کردیم و نحوه سفارشی سازی اونا رو گفتیم. این آموزش درمورد JSS هست که در کار با MaterialUI و جاهای دیگه خیلی کمکتون میکنه.

JSS چیست؟ CSS in JS = JSS

jss کدهای js و CSS که runtime و سمت سرور کار می کنه.

Jss خیلی قوی تر از Css هست که با استفاده از جاوا اسکریپت به عنوان یک زبان برای توصیف سبک ها در یک شیوه ی توصیفی و قابل نگهداری استفاده می شه.
Material-UI هم از jss توی هسته خودش استفاده می کنه.
برای این کار اول react-jss رو باید توی برنامه تون استفاده کنید react-jss به شما این امکان رو میده که کامپوننت های jss رو توی برنامه استفاده کنید.

1
npm install --save react-jss

از جمله فوایدی که استفاده از jss  داره، میشه به این اشاره کرد که Material-UI از تعداد کمی theme استفاده می کنه، شما همیشه می تونید پلاگین های جدید رو هر وقت نیاز داشتین با JssProvider به برنامه تون اضافه کنید.

برای نمونه نحوه استفاده و کاربرد react-jss رو توی مثال زیر میتونین ببینین:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
 
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
 
function App() {
  return (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}
 
export default App;

امیدوارم این نوشته براتون مفید باشه. میتونین اطلاعات بیشتری رو درمورد JSS و React-JSS رو توی سایت http://cssinjs.org ببینین. خیلی خوشحال میشیم توی کامنت ها تجربیاتتون رو به اشتراک بزارید.

برچسب:css in js, jss, react-jss

  • اشتراک گذاری:
عاصفه

    مطلب قبلی

    قسمت ششم گپ و گفت | مسعود صدری و فرانت کست
    آبان 2, 1397

    مطلب بعدی

    راست چین کردن کامپوننت های MaterialUI
    آبان 5, 1397

    ممکن است همچنین دوست داشته باشید

    responsive-design
    ریسپانسیو کردن وب سایت با استفاده از Material-UI
    13 بهمن, 1397
    معرفی کتابخانه های ui
    معرفی کتابخانه ها و فریم ورک های UI
    28 آبان, 1397
    تصویر شاخص
    راست چین کردن کامپوننت های MaterialUI
    5 آبان, 1397

      2 نظر

    1. رعنا
      دی 15, 1397
      پاسخ

      کاش توضیحات بیشتی در رابطه با JSS میذاشتید

      • مهدی
        دی 16, 1397
        پاسخ

        سلام.سعی میکنم در آینده در یک مقاله به صورت کامل در این مورد بحث کنیم

    نظر بدهید لغو پاسخ

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    جستجو

    دسته‌ها

    • Material UI
    • React
    • React Native
    • آموزش متنی
    • استارت آپ و آموزش
    • برنامه نویسی
    • جاوااسکریپت
    • گپ و گفت

    دوره ها

    ارسال نوتیفیکیشن در React Native

    ارسال نوتیفیکیشن در React Native

    رایگان
    آموزش جاوااسکریپت (javascript)

    آموزش جاوااسکریپت (javascript)

    رایگان
    پیاده سازی تبلیغات در React Native با تپسل

    پیاده سازی تبلیغات در React Native با تپسل

    رایگان

    نوشته ها

    گوگل وب مستر تولز Google Webmaster Tools
    با گوگل وبمستر تولز بیشتر آشنا شوید !
    28بهمن1397
    react hooks چیست
    چطور فقط با استفاده از React Hooks یک وب‌اپلیکیشن توسعه بدیم؟
    25بهمن1397
    کتابخانه های جاوااسکریپت
    معرفی کتابخانه Persian Tools
    24بهمن1397
    • دوره های آموزشی
    • تله فیلم آموزشی
    • آموزش متنی
    • سوالات متدوال
    • بلاگ
    • درباره ما
    • تماس با ما

    reactapplogo

    09150274110

    contact@reactapp.ir

    کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.

    • قوانین
    • چارت آموزشی
    • کانال تلگرام

    ورود به حساب کاربری

    رمز عبوررا فراموش کرده اید؟

    هنوز عضو نیستید؟همین حالا عضو شو!

    عضویت

    هم اکنون غضو هستید؟وارد شوید