Material-UI的Box组件设置align-items="baseline"不生效如何解决？

问题原因 #

Material UI 的 Box 组件内置的样式属性需使用驼峰命名格式，你代码中写的 align-items、flex-direction 这类短横线分隔的属性名无法被组件识别为有效样式配置，导致你想要的对齐规则根本没有生效。

修正后的代码 #

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

export default function App() {
  return (
    <>
      <Box display="flex" alignItems="baseline" flexDirection="row">
        <Box fontSize="2em" fontWeight="600">
          Belinda Carlisle
        </Box>
        {/* 可选：加左边距拉开两个文本的间距更美观 */}
        <Box ml={1}>
          12345678
        </Box>
      </Box>
    </>
  );
}

补充说明 #

如果你需要的是文本完全对齐到父容器的最底部，而非文字基线对齐，可以把 alignItems 的值替换为 flex-end，按需调整即可。

内容的提问来源于stack exchange，提问作者Aaron