معرفی 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 ببینین. خیلی خوشحال میشیم توی کامنت ها تجربیاتتون رو به اشتراک بزارید.
2 نظر
کاش توضیحات بیشتی در رابطه با JSS میذاشتید
سلام.سعی میکنم در آینده در یک مقاله به صورت کامل در این مورد بحث کنیم