带有 svg 圆圈的 Material-UI 单选按钮

Question

大家好，我正在尝试使用 CSS 模块自定义 Material-UI单选按钮，但我没有取得太大的成功，似乎更简单的方法是使用 Material-UI 中的 makeStyles 函数，但是我应该使用 CSS 模块。

这是标准的 Material-UI 单选按钮：

基本上我必须这样做： .

Material-UI 没有可用的复选标记，但我确信我可以用 SVG 以某种方式做到这一点，但我似乎无法弄清楚如何去做。如果有人可以请帮助或指出我正确的方向，我将不胜感激。

更新：事实证明，我可以使用我在 Material-UI 图标上找到的 Radio 组件的 checkedIcon 属性将 SVG 作为组件注入，这里是文档。

这只满足了我对我需要的选中的“活动”部分的需求，然后我在“悬停”部分苦苦挣扎，同时认为我必须为此使用 SVG，而我真正需要做的就是使用::before 或 ::after 创建一个伪元素并将它的样式设置为与主圆圈相连的圆圈，与“焦点”部分相同。

Answer 1

您可以简单地使用Checkbox 组件 ( https://material-ui.com/api/checkbox/#props )的icon和checkedIcon属性并传入任何类型的渲染 SVG 的组件。

编辑：我用 CSS 模块说明了一个小演示（基于 Material-UI 复选框演示），因为最初的答案没有满足您的所有要求（例如，缺少焦点示例）。它看起来也不太好，但我认为它应该有助于展示其背后的想法（焦点应该类似于悬停示例）。

成分：

import React from 'react';
// webpack, parcel or else will inject the CSS into the page
import styles from './CssModulesCheckboxes.css';
import Checkbox from '@material-ui/core/Checkbox';

function StyledCheckbox(props) {
  return (
    <Checkbox
      checkedIcon={<span className={styles.checkedIcon} />}
      icon={<span className={styles.icon} />}
      inputProps={{ 'aria-label': 'decorative checkbox' }}
      {...props}
    />
  );
}

export default function CssModulesButton() {
  return (
    <div>
      <StyledCheckbox />
      <StyledCheckbox defaultChecked />
      <StyledCheckbox defaultChecked disabled />
    </div>
  );
}

CSS 模块：

.icon {
  border-radius: 3px;
  width: 16px;
  height: 16px;
  box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1);
  background-color: #f5f8fa;
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0));
}

input:hover ~ .icon {
  background-color: #137cbd;
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0));
}

input:hover ~ .icon::before {
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23aaa'/%3E%3C/svg%3E");
  content: '';
}

.checkedIcon {
  background-color: #137cbd;
  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0));
}

.checkedIcon::before {
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E");
  content: '';
}

input:disabled ~ .checkedIcon {
  box-shadow: none;
  background: rgba(206, 217, 224, 0.5);
}

在codesandbox中运行的示例：https ://codesandbox.io/s/css-modules-vdbi8