使 MUI 按钮随着过渡而变宽

Question

所以我们有这个自定义的 ToggleButton，并且我们有一种情况，其中的文本会根据某些状态的变化而变化。问题是宽度的增长很突然，如何轻松过渡？

到目前为止，这是我的组件：

import {
  type Theme, ToggleButton as MUIToggleButton, ToggleButtonProps, useTheme,
} from '@mui/material';
import { IWithSeleniumAttribute } from '../../../../interfaces';
import { Typography } from '../../../index';

export interface ITabProps extends ToggleButtonProps, IWithSeleniumAttribute {
  typographyDataSelenium?: string;
}

const buildSX = (theme: Theme) => ({
  // our styles here
});

const Tab = (props: ITabProps) => {
  const {
    typographyDataSelenium,
    children,
    sx = [],
    ...restProps
  } = props;

  const theme = useTheme();

  return (
    <MUIToggleButton
      sx={[
        buildSX(theme),
        ...(Array.isArray(sx) ? sx : [sx]),
      ]}
      {...restProps}
    >
      <Typography data-selenium={typographyDataSelenium}>
        {children}
      </Typography>
    </MUIToggleButton>
  );
};

export default Tab;

Answer 1

我认为你可以在 buildSX 中添加过渡样式。我提供更新的代码。

import {
  type Theme,
  ToggleButton as MUIToggleButton,
  ToggleButtonProps,
  useTheme,
} from '@mui/material';
import { IWithSeleniumAttribute } from '../../../../interfaces';
import { Typography } from '../../../index';

export interface ITabProps extends ToggleButtonProps, IWithSeleniumAttribute {
  typographyDataSelenium?: string;
}

const buildSX = (theme: Theme) => ({
  // Add transition to width change
  transition: 'width 0.3s ease-in-out',
  // Other styles here
});

const Tab = (props: ITabProps) => {
  const {
    typographyDataSelenium,
    children,
    sx = [],
    ...restProps
  } = props;

  const theme = useTheme();

  return (
    <MUIToggleButton
      sx={[
        buildSX(theme),
        ...(Array.isArray(sx) ? sx : [sx]),
      ]}
      {...restProps}
    >
      <Typography data-selenium={typographyDataSelenium}>
        {children}
      </Typography>
    </MUIToggleButton>
  );
};

export default Tab;

希望对您有帮助。