时间戳

首页 > 解决方案 > 如何居中对齐 Material UI Switch 和它的图标道具？

javascript - 如何居中对齐 Material UI Switch 和它的图标道具？

问题描述

我将 Material-UI 用于 Switch 组件。此组合具有图标的属性。问题是，当您添加图标时，对齐方式就会偏离。

如何在我的 Switch 中居中对齐两个图标？

使用问题的副本查看此沙箱：

https://codesandbox.io/s/nervous-yalow-z9dev?file=/src/App.js

标签： javascripthtmlreactjsmaterial-ui

解决方案

我认为在 Material-UI 4 中没有一种优雅的方式来做到这一点（参见答案底部的示例）。

您可以使用 propclasses到达要居中的switchBase(.MuiSwitch-switchBase) 元素。您可以使用makeStyles钩子生成器执行此操作，它允许您覆盖样式：

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  yourClass: {
    /* Your styles */
  },
});

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <Switch classes={{switchBase: classes.yourClass}} />
    </div>
  );
}

switchBase元素有position: absolute. 为了居中，我们不能使用：

top: 50%;
transform: translateY(-50%);

通过执行Switch组件的巧妙方法。
但是我们可以使用：

height: elementHeight;
top: 50%;
marginTop: -elementHeight/2;

您可以查看下面的完整示例以及一些其他样式，以使其看起来更好：

https://codesandbox.io/s/zealous-kapitsa-xgkzg?file=/src/App.js

推荐阅读