JSS All In One

JSS All In One

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way.
It can compile in the browser, server-side or at build time in Node.

JSS 是一个 CSS 创作工具，它允许您使用 JavaScript 以声明性、无冲突和可重用的方式描述样式。
它可以在浏览器、服务器端或在 Node.js 的构建时编译。

https://cssinjs.org/repl/

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"));

refs

https://cssinjs.org/

https://github.com/cssinjs/jss

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！

---