css - 使用 createStyles 时可以继承样式吗？

Question

这是我的 Typescript 代码中的 createStyles 语句:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    menuOpen: {
      zIndex: 1,
      width: 200,
      height: '100%',
      position: 'fixed',
      top: 48,
      transition: 'left .1s',
      marginRight: theme.spacing(2),
      left: 0,
      background: '#3f51b5',
      '& div:first-element': {
        marginTop: 100
      }
    },
    menuClose: {
      zIndex: 1,
      width: 200,
      height: '100%',
      position: 'fixed',
      top: 48,
      transition: 'left .1s',
      marginRight: theme.spacing(2),
      left: -200,
      background: '#3f51b5',
      '& div:first-element': {
        marginTop: 100
      }
    },
  }),
);

我在它们之间切换以打开或关闭菜单(使用 useState 变量)。如您所见，这些样式具有共同的属性。我如何才能制作出这两种样式可以继承的 menu 样式？

编辑:所以看起来转换的东西不起作用，我想知道那是不是因为 React 重新加载了那些 DOM 元素？我尝试在 menuClose 和 menuOpen 样式中添加过渡，以防万一它需要它们，但菜单就像它没有过渡属性一样。

在 @doglozano 的回答后，我的 createStyles 函数中有以下内容:

// I've even tried putting the transition in a div wrapper
// but I think that element is getting overwritten also.
toolBar: {
  '& div': {
    transition: 'left .1s'
  }
},
menu: {
  zIndex: 1,
  width: 200,
  height: '100%',
  position: 'fixed',
  top: 48,
  transition: 'left .1s',
  marginRight: theme.spacing(2),
  left: -200,
  background: '#3f51b5',
  '& div:first-element': {
    marginTop: 100
  }
},
menuOpen: {
  left: 0,
  transition: 'left .1s',
},
menuClose: {
  left: -200,
  transition: 'left .1s',
},

当我的菜单关闭时:

.makeStyles-menuClose-7 {
    left: -200px;
    transition: left .1s;
}
.makeStyles-menu-5 {
    top: 48px;
    left: -200px;
    width: 200px;
    height: 100%;
    z-index: 1;
    position: fixed;
    background: #3f51b5;
    transition: left .1s;
    margin-right: 16px;
}
.makeStyles-toolBar-4 {
    transition: left .1s;
}

当我的菜单打开时:

.makeStyles-menuOpen-6 {
    left: 0;
    transition: left .1s;
}
.makeStyles-menu-5 {
    top: 48px;
    left: -200px;
    width: 200px;
    height: 100%;
    z-index: 1;
    position: fixed;
    background: #3f51b5;
    transition: left .1s;
    margin-right: 16px;
}
.makeStyles-toolBar-4 {
    transition: left .1s;
}

编辑 2:这是我的 Sandbox link .

有什么想法吗？

Answer 1

您可以定义一个具有所有公共(public)属性的基类，然后在 menuOpen 和 menuClose 中只具有特定属性。然后，您可以使用诸如 classnames 之类的库或 clsx始终应用基类，然后根据您的状态变量有条件地应用 menuOpen 或 menuClose。

看起来像这样:

import clsx from 'clsx';

...

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    menu: {
      zIndex: 1,
      width: 200,
      height: '100%',
      position: 'fixed',
      top: 48,
      transition: 'left .1s',
      marginRight: theme.spacing(2),
      background: '#3f51b5',
      '& div:first-element': {
        marginTop: 100
      }
    }
    menuOpen: {
      left: 0,
    },
    menuClose: {
      left: -200,
    },
  }),
);

...

const YourStyledCommponent = ({ classes }) => {

   const [isOpen, setOpen] = useState(false);

   return (
      <SomeMuiComponent 
         className={clsx(classes.menu, {
            [classes.menuOpen]: isOpen,
            [classes.menuClose]: !isOpen,
         })}
      />
   );
}

当然你也可以说你的基本菜单样式将是关闭状态，然后你最终只有一个额外的样式:

import clsx from "clsx";

...

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    menu: {
      zIndex: 1,
      width: 200,
      height: '100%',
      position: 'fixed',
      top: 48,
      transition: 'left .1s',
      marginRight: theme.spacing(2),
      background: '#3f51b5',
      left: -200,
      '& div:first-element': {
        marginTop: 100
      }
    }
    menuOpen: {
      left: 0,
    },
  }),
);

...

const YourStyledCommponent = ({ classes }) => {

   const [isOpen, setOpen] = useState(false);

   return (
      <SomeMuiComponent 
         className={clsx(classes.menu, {
            [classes.menuOpen]: isOpen,
         })}
      />
   );
}

编辑:如 @Ryan Cogswell 在评论中所述，clsx 将是推荐的库，如果您正在使用 Material UI >= v4.0，因为它已经包含在其中了😁。