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

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

JSS چیست؟ CSS in JS = JSS

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

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

npm install --save react-jss

1	npm install --save react-jss

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

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

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;

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>

);

}

export default App;

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

2 نظر