react material-ui 添加jss插件

jss.config.js

import { create } from "jss";
import preset from "jss-preset-default";
import { jssPreset } from "@material-ui/core/styles";

const jss = create(jssPreset()).setup(preset());
export default jss;

src/index.js

import CssBaseline from "@material-ui/core/CssBaseline";
import JssProvider from "react-jss/lib/JssProvider";

import jss from "./jss.config";

ReactDOM.render(
  <>
    <CssBaseline />
    <JssProvider jss={jss}>
          <App />
    </JssProvider>
  </>,
  document.getElementById("root"),
);

const styles = theme => ({
  a: {
    color: "red",
    "&:hover": {
      color: "blue",
    },
  },
  b: {
    extend: "a",
    "&:hover": {
      color: "green",
    },
  },
  "@media (min-width: 1024px)": {
    a: {
      background: "red",
    },
  },

  c: {
    padding: {
      top: 8,
      left: 8,
    },
  },
});

function Test({ classes }) {
  return (
    <ul>
      <p className={classes.a}>a</p>
      <p className={classes.b}>b</p>
      <p className={classes.c}>c</p>
    </ul>
  );
}

export default withStyles(styles)(Test);

基本选择器 文档 扩展语法

const n = 100;
const styles = theme => ({
  a: {
    width: n,
    height: n,
    border: ["1px solid red"],
    padding: [[1, 2, 3, 4]],
    "&::after": {
      content: "'jss'",
    },
  },
});

合成语法 文档

const styles = theme => ({
  a: {
    composes: ["d-inline", "flex-grow"],
    padding: [10, 20],
  },
});
<ul className={classes.a}>1</ul>
<ul class="Testa-0-3-1 d-inline flex-grow">1</ul>

const styles = theme => ({
  a: {
    color: "red",
    font: {
      size: "22px",
    },
  },
  c: {
    "&::after": {
      content: "'jss'",
    },
  },
  b: {
    composes: ["$a", "$c", 'd-inline'],
    color: "blue",
  },
});
<ul className={classes.b}>1</ul>
<ul class="Testb-0-3-3 Testa-0-3-1 Testc-0-3-2 d-inline">1</ul>

模板字符串 文档

const styles = theme => ({
  a: `
    font-size: 22px;
  `,
});
<ul className={classes.a}>1</ul>