您可以简单地使用Checkbox 组件 ( https://material-ui.com/api/checkbox/#propsicon
) 的和属性,并传入呈现 SVG 的任何类型的组件。checkedIcon
编辑:我用 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);
}
在代码沙箱中运行的示例: https ://codesandbox.io/s/css-modules-vdbi8