问题描述
禁用的未选中复选框看起来有点过于微妙,我希望它们具有灰色背景,并且光标类型为 not-allowed
。
不幸的是,我无法弄清楚如何使用 makeStyles
在复选框上应用这些样式。这是我当前代码的样子:
const useStyles = makeStyles((theme) => ({
disabledCheckBox: {
cursor: 'not-allowed',color: 'grey',backgroundColor: 'grey',},}));
// ...
const App = () => {
const classes = useStyles();
return (
<div>
disabled:
<CheckBox
disabled={true}
name="disabled checkBox"
classes={{ disabled: classes.disabledCheckBox }}
/>
</div>
);
};
不幸的是,这没有任何作用,禁用的复选框看起来是一样的。这是一个 demo app to compare a disabled and enabled one。
我做错了什么?如何更改未选中的 MUI 禁用复选框的背景颜色:
解决方法
单独使用 disabled 类并不能提供足够的特异性来覆盖 default styles in IconButton。此外,您不想覆盖整个复选框的背景颜色,否则它将填充获得复选框悬停效果的整个区域;相反,您只想将复选框中的图标作为目标(即使这样也稍微有点不理想——稍后会详细介绍)。
下面是一种定义样式的方法,其具有足够的特异性以仅针对图标。覆盖光标需要一些额外的工作,因为默认情况下禁用按钮上的 Material-UI disables pointer events(复选框利用 SwitchBase 使用 IconButton 使用 ButtonBase)并且光标 CSS 在禁用指针事件时无效。下面的 CSS 会重新开启指针事件,但随后需要关闭之前通过 pointerEvents: 'none'
阻止的悬停效果。
const useStyles = makeStyles((theme) => ({
backgroundColorOnWholeIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto','&:hover': {
backgroundColor: 'transparent',},cursor: 'not-allowed','& .MuiSvgIcon-root': {
backgroundColor: '#eee',}));
不幸的是,这仍然不能产生您可能想要的结果。复选框图标的框不会延伸到图标所在的 24 像素 x 24 像素框的边缘,因此当您设置背景颜色时,它会溢出框:
为了填充复选框的内部框而不改变框外几个像素的颜色,您需要创建一个自定义图标。
下面的代码创建了一个与默认未选中图标相同的自定义图标,除了它添加了第二个路径,复制了复选框的内框而没有任何填充,以便它可以通过 CSS 定位。
import React from 'react';
import createSvgIcon from '@material-ui/icons/utils/createSvgIcon';
export default createSvgIcon(
<>
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
<path fill="none" class="innerBox" d="M19 5v14H5V5h14" />
</>,'CustomUnchecked'
);
然后你可以按如下方式定位这个内框:
const useStyles = makeStyles((theme) => ({
backgroundColorOnInnerBoxOfCustomIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto','& .MuiSvgIcon-root .innerBox': {
fill: '#eee',}
}));
为了使其工作,您需要在复选框上指定自定义图标。如果您希望所有禁用的复选框看起来像这样,也可以通过主题完成所有这些操作。
以下是一个工作示例,演示了通过 makeStyles
和主题执行此操作。
import { Checkbox } from '@material-ui/core';
import {
makeStyles,createMuiTheme,ThemeProvider,} from '@material-ui/core/styles';
import CustomUncheckedIcon from './CustomUnchecked';
import React from 'react';
const useStyles = makeStyles((theme) => ({
backgroundColorOnInnerBoxOfCustomIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',backgroundColorOnWholeIcon: {
'&.Mui-disabled': {
pointerEvents: 'auto',}));
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
props: {
MuiCheckbox: {
icon: <CustomUncheckedIcon />,overrides: {
MuiCheckbox: {
root: {
'&.Mui-disabled': {
pointerEvents: 'auto','&:hover': {
backgroundColor: 'transparent',// This syntax is necessary (instead of just ".MuiSvgIcon-root") because of the nested theme causing the global class names to be suffixed)
'& [class*=MuiSvgIcon-root] .innerBox': {
fill: '#eee',});
const App = () => {
const classes = useStyles();
return (
<ThemeProvider theme={defaultTheme}>
<div style={{ marginBottom: '16px' }}>
Styled via makeStyles
<br />
Disabled without custom icon:
<Checkbox
className={classes.backgroundColorOnWholeIcon}
disabled={true}
name="Disabled checkbox"
/>
<br />
Disabled:
<Checkbox
className={classes.backgroundColorOnInnerBoxOfCustomIcon}
disabled={true}
icon={<CustomUncheckedIcon />}
name="Disabled checkbox"
/>
Enabled:
<Checkbox
icon={<CustomUncheckedIcon />}
className={classes.backgroundColorOnInnerBoxOfCustomIcon}
name="Enabled checkbox"
/>
</div>
<ThemeProvider theme={theme}>
<div>
Styled via theme
<br />
Disabled:
<Checkbox disabled={true} name="Disabled checkbox" />
Enabled:
<Checkbox name="Enabled checkbox" />
</div>
</ThemeProvider>
</ThemeProvider>
);
};
export default App;
,
有选项可以传递选中的图标和未选中的图标,根据样式,您需要先选择图标,然后您可以使用'input:disabled ~ &': 更改禁用复选框的样式,您可以使用如下样式
fname = 'archives/folder_name/name2/name3/name4/225422.tar.gz'
pos = fname.rindex('/') + 1 # get the position of the character following the last /
h,m,s = [fname[i:i + 2] for i in range(pos,pos + 5,2)] # generate a list of three slices of 2 characters each,using list compehention,starting from the position found earlier and assign it to three variables
print(h,s) # 22 54 22
参考下面的沙箱