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

Question

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

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

基本上我必须这样做: .

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

更新:事实证明，我可以使用我在 Material-UI 图标上找到的 Radio 组件的 checkedIcon 属性将 SVG 作为组件注入(inject)，这里是 documentation .

这只满足了我对选中的“事件”部分的需求，然后我在“悬停”部分苦苦挣扎，同时认为我必须为此使用 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