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

IT技术 css reactjs material-ui
2021-05-10 09:38:40

这是createStyles我的 Typescript 代码中的一个语句：

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 链接。

有任何想法吗？

1个回答

您可以定义一个具有所有公共属性的基类，然后在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，这将是推荐的库，因为它已经包含在其中 😁。

其它你可能感兴趣的问题
上一篇开玩笑地与 babel / laravel-mix 一起工作 下一篇手动改变 React 上的状态，然后调用 setState