我有一个React应用程序，代码如下：

export const AppHeaderBase: React.FunctionComponent<IAppHeaderProps> = (
  props: IAppHeaderProps
) => {
  const { className, styles } = props;
  const classNames: IProcessedStyleSet<IAppHeaderStyles> = getClassNames(
    styles,
    {
      className,
      theme: useTheme(),
    }
  );

  return (
    <header>
      <div className={classNames.root} role="banner" aria-label="header">
        <div>Welcome XYZ</div>
        <DefaultButton>Add</DefaultButton>
        <DefaultButton>Log Out</DefaultButton>
      </div>
    </header>
  );
};

export const getStyles = (props: IAppHeaderStyleProps): IAppHeaderStyles => {
  const { className, theme } = props;

  return {
    root: [
      {
        backgroundColor: theme.palette.themePrimary,
        height: 54,
        maxWidth: "100%",
        margin: '0 auto',
        borderBottom: '1px solid transparent',
        boxSizing: 'border-box',
        display: 'flex'
      },
      className
    ]
  };
};

问题是我在UI中看到的所有这些之间没有任何空格

我如何更新它，使这三个之间有相等的空间？