تنسيقات css في react

إذا أردت أن تستخدم تنسيقات خاصة مثلاً لكل مكون أو كل صفحة تقوم بعملها فيمكنك استخدام ( JSS ) حيث إنها أداة ستسهل عليك كتابة التنسيقات وأيضا عن طريق الجافاسكربت بحيث يكون كل ملف له تنسيقاته الخاصة وهذا مثال 
 

import React from "react";
import { render } from "react-dom";
import { createUseStyles, ThemeProvider, useTheme } from "react-jss";

// نقوم بإنشاء تنسيقات
const useStyles = createUseStyles({
  wrapper: {
    padding: 40,
    background: ({ theme }) => theme.background,
    textAlign: "left"
  },
  title: {
    font: {
      size: 40,
      weight: 900
    },
    color: ({ theme }) => theme.color
  },
  link: {
    color: ({ theme }) => theme.color, // نستخدم قيمة الثيم الذي تم تمريره 
    "&:hover": {
      opacity: 0.5
    }
  }
});

const Comp = () => {
  const theme = useTheme(); // نستخدم الثيم 
  const classes = useStyles({ theme }); // نقوم باستدعاء التنسيقات وتمرير الثيم لها لاستخدامها كما في الأعلى
  return (
    <div className={classes.wrapper}>
      <h1 className={classes.title}>Hello React-JSS!</h1>
      <a
        className={classes.link}
        href="http://cssinjs.org/react-jss"
        traget="_blank"
      >
        See docs
      </a>
    </div>
  );
};

const theme = {
  background: "#f7df1e",
  color: "#24292e"
};

const App = () => (
  <ThemeProvider theme={theme}> // نقوم بإنشاء تنسيقات عامة --- يمكنك أن تتجاهلها (تستخدم في حالة كان لديك تنسيقات عامة لمجموعة من المكونات )
    <Comp />
  </ThemeProvider>
);

render(<App />, document.getElementById("root"));