MUI v5 -在复选框上应用不同的类
MUI v5 -在复选框上应用不同的类
提问于 2022-10-30 15:12:46
最近，我从Mui v4迁移到了v5，并且在使用复选框时遇到了一种奇怪的行为。当比较DOM中的旧版本和新版本时，在我看来，v5应用了一些额外的类，并且不再应用className MuiIconButton-label的额外跨度，这使我的列表看起来有点奇怪，因为复选框将不再使用相同的样式。我知道这是一个从jss到情感的转变，但其他的一切似乎都像往常一样。
我在迁移文档这里中提供的codemods的帮助下进行了迁移。
老DOM：
<span class="MuiButtonBase-root MuiIconButton-root jss10 MuiCheckbox-root
MuiCheckbox-colorSecondary Checkbox jss11 Mui-checked --checked
MuiIconButton-colorSecondary" aria-disabled="false">
<span class="MuiIconButton-label">
<input class="jss13" tabindex="0" type="checkbox" data-indeterminate="false" value="" checked="">
<svg width="16" height="16" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"></svg>
</span>
</span>迁移到V5后的DOM：
<span class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary
PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-root
MuiCheckbox-colorPrimary Checkbox css-1k6mikw-MuiButtonBase-root-MuiCheckbox-root">
<input class="PrivateSwitchBase-input css-1m9pwf3" tabindex="0" type="checkbox" data-indeterminate="false">
<svg width="16" height="16" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg" font-size="medium"></svg>
</span>首先，我认为这可能与注入样式的顺序有关，因此我尝试使用以下StyledEngineProvider组件：
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<LocaleUtils.LocaleProvider>
<ErrorBoundary fatal={true} resetKey={resetKey}>
{(topLevelError: Error | null) =>
topLevelError ? (
<FatalError error={topLevelError} />
) : (
React.createElement(routerManager.component, {
children: (routes: any) => <RouterContent renderId={renderId} routes={routes} />,
} as any)
)
}
</ErrorBoundary>
</LocaleUtils.LocaleProvider>
</ThemeProvider>
</StyledEngineProvider>
);但这没什么区别。
当将复选框组件切换回v4版本(从material/core导入)时，它解决了这个问题。
我的checkbox.tsx：
import "./Checkbox.scss";
import React, { useCallback, useMemo } from "react";
import clsx from "clsx";
import { IconLine, IconTick } from "../../../assets";
import { Checkbox } from "@mui/material";
import * as Utils from "../../../lib/util/Utils";
export interface CheckboxProps {
id?: string;
value?: string | boolean;
checked?: boolean;
indeterminate?: boolean;
defaultValue?: boolean;
className?: string;
disabled?: boolean;
onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, id?: string) => void;
size?: "small" | "medium";
}
const CustomCheckbox = (props: CheckboxProps) => {
const { id, value, checked, size, onChange, disabled, className, defaultValue, indeterminate } = props;
const handleChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
if (onChange) {
onChange(event, checked, id);
}
},
[id, onChange],
);
const isChecked = useMemo(() => {
if (checked !== undefined) {
return checked;
}
return Boolean(value);
}, [value, checked]);
return (
<Checkbox
disabled={disabled}
onClick={Utils.stopPropagation}
size={size}
disableRipple={true}
icon={<IconTick />}
checkedIcon={<IconTick />}
indeterminateIcon={<IconLine />}
indeterminate={indeterminate}
className={clsx("Checkbox", className)}
classes={{
checked: "--checked",
indeterminate: "--indeterminate",
disabled: "--disabled",
}}
onChange={handleChange}
value={value}
checked={isChecked}
defaultChecked={defaultValue}
tabIndex={0}
/>
);
};
export default CustomCheckbox;复选框scss：
@import "../../../stylesheet/toolkit";
@mixin checkbox-color($color) {
color: $color !important;
&.--checked,
&.--indeterminate {
.MuiIconButton-label {
border-color: $color;
box-shadow: inset 0 0 0 3px transparentize($color, 0.7);
}
}
}
.Checkbox.MuiCheckbox-root {
margin: 0;
padding: 0;
@include checkbox-color($goldenrod);
&:hover {
background: transparent;
}
@each $color, $value in $placeholders-colors {
&.--col-#{$color} {
@include checkbox-color($value);
}
}
@each $color, $value in $colors {
&.--col-#{$color} {
@include checkbox-color($value);
}
}
.MuiIconButton-label {
border: 1px solid $grey;
border-radius: 4px;
padding: 5px;
background: white;
}
&.--checked {
svg {
transform: scale(1);
}
}
&.--disabled {
@include checkbox-color($grey);
.MuiIconButton-label {
border-style: dashed;
cursor: not-allowed;
}
}
}
.Checkbox {
svg {
width: 16px;
height: 16px;
transform: scale(0);
transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-30 23:03:21
在这里的迁移指南中记录了这一点：https://mui.com/material-ui/migration/v5-component-changes/#update-css-class-names (也是对Button 这里的相关更改)。
复选框 更新CSS类名 该组件不再具有
.MuiIconButton-root和.MuiIconButton-label类名。 目标是.MuiButtonBase-root。
不只是缺少MuiIconButton-label CSS类，他们完全删除了内部span，因为它不再是应用默认样式所必需的。您将需要为新的(更简单的) html结构重新设计那些CSS自定义。在您的示例中，这将意味着将.MuiIconButton-label { CSS规则扁平化以将这些样式应用于父元素，但如果不尝试，我不确定可能需要对CSS进行多少额外的调整。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74254217
复制相关文章
相似问题
腾讯云开发者
