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'",
    },
  },
});