材质 ui 按钮移至新行答案

【问题标题】：material ui button moves to a new line材质 ui 按钮移至新行
【发布时间】：2021-07-23 01:44:45
【问题描述】：

我前面有一些文本和一个按钮（弹出窗口）。目前，文本和按钮之间没有空格。我想在这两个项目之间留一些空间。如果我尝试将其中一个放在一个分区中以放置 marginRight 或 marginLeft，则第二个对象（按钮）将移动到下一行。我希望它们都在同一行，但中间有一个空格。我怎样才能做到这一点？

const useStyles = makeStyles((theme) => ({
  heading: {
    fontSize: "25px"
  },
  popup: {
    marginLeft: "20px"
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <div className={classes.heading}>
        Instructions
        {/* <div className={classes.popup}> */}
        <Popup />
        {/* </div> */}
      </div>
    </div>
  );
}

代码沙盒：https://codesandbox.io/s/bold-hooks-yhik1?file=/src/App.js:0-638

【问题讨论】：

标签： javascript css reactjs typescript material-ui

【解决方案1】：

你试过使用弹性盒子吗？

在您的样式上将标题类更新为display: flex

  heading: {
   fontSize: "25px",
   display: "flex",
   alignItems: "center"
  },

这是你想要达到的目标吗？

从您的代码盒中分叉：

https://codesandbox.io/embed/boring-northcutt-e0wdg?fontsize=14&hidenavigation=1&theme=dark

【讨论】：