如何在 React 中使用 JSS 自定义复选框

Question

我正在尝试按照 w3schools 教程学习如何自定义 css。但是，我使用 JSS 作为样式解决方案，结果这变得有点复杂。

https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

HTML：

<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

CSS：

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Answer 1

你可以用 JSS 做到这一点，只是需要大量的嵌套。

https://codesandbox.io/s/jss-checkboxes-vj83b

使用 JSS 在 React 中自定义复选框：

import React from "react";
import { createUseStyles } from "react-jss";

// How to? https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

import "./styles.css";

const useStyles = createUseStyles({
  /* Customize the label (the container) */
  container: {
    display: "block",
    position: "relative",
    paddingLeft: "35px",
    marginBottom: "12px",
    cursor: "pointer",
    fontSize: "22px",
    userSelect: "none",
    "& input": {
      /*  Hide the browser's default checkbox  */
      position: "absolute",
      opacity: 0,
      cursor: "pointer",
      height: 0,
      width: 0,
      /* Show the checkmark when checked */
      "&:checked": {
        "& ~ $checkmark": {
          /* When the checkbox is checked, add a blue background */
          backgroundColor: "#2196F3",
          "&:after": {
            display: "block"
          }
        }
      }
    },

    "& $checkmark": {
      "&:after": {
        left: "9px",
        top: "5px",
        width: "5px",
        height: "10px",
        border: "solid white",
        borderWidth: "0 3px 3px 0",
        transform: "rotate(45deg)"
      }
    },

    /* On mouse-over, add a grey background color */
    "&:hover": {
      "& input": {
        "& ~ $checkmark": {
          backgroundColor: "#ccc"
        }
      }
    }
  },

  checkmark: {
    position: "absolute",
    top: 0,
    left: 0,
    height: "25px",
    width: "25px",
    backgroundColor: "#eee",
    "&:after": {
      content: '""',
      position: "absolute",
      display: "none"
    }
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <h1>How to customize checkbox with JSS</h1>

      <label className={classes.container}>
        One
        <input type="checkbox" checked={true} />
        <span className={classes.checkmark} />
      </label>
      <label className={classes.container}>
        two
        <input type="checkbox" checked={false} />
        <span className={classes.checkmark} />
      </label>
      <label className={classes.container}>
        three
        <input type="checkbox" />
        <span className={classes.checkmark} />
      </label>
    </div>
  );
}