React Styled Components：对齐内容不起作用，但对齐项目和 flex-direction 可以吗？

Question

我在我的 React 应用程序的 div 中添加了 justify-content: space-evenly，但我没有看到任何变化。我已经申请了display: flex、align-items: flex-end，它们都按预期工作。我还尝试flex-direction 来检查它是否有效，并且确实有效。我不明白为什么justify-content 不起作用？我尝试了justify-content 的其他值，例如space-around、space-between 和center，但我得到了相同的结果，justify-content 似乎根本不起作用。下面是我的组件代码和组件继承的父样式...

---- 组件----

// Libraries
import styled from "styled-components";
import { useSelector, useDispatch } from "react-redux";

// Components and icons
import { StyledTop } from "../Components/styles";
import {
  RecentlyPlayedIcon,
  SettingsIcon,
  QuitIcon,
} from "../Components/icons";

const RightBarButtons = () => {
  // Grab needed state and set vars
  const theme = useSelector((state) => state.theme);
  const rightBarState = useSelector((state) => state.rightBarSelection);
  const dispatch = useDispatch();

  // Handlers
  const buttonHandler = (buttonName) => {
    if (buttonName !== rightBarState) {
      dispatch({
        type: `SET_RIGHT_BAR_${buttonName.toUpperCase()}`,
      });
    }
  };
  return (
    <StyledTopButtons>
      <button>
        <QuitIcon theme={theme} />
      </button>
      <button
        onClick={() => {
          buttonHandler("settings");
        }}
        style={{
          borderLeft: `4px solid ${
            theme === "light" ? "rgba(0,0,0,.05)" : "rgba(255, 255, 255, 0.125)"
          } `,
          borderRight: `4px solid  ${
            theme === "light" ? "rgba(0,0,0,.05)" : "rgba(255, 255, 255, 0.125)"
          } `,
        }}
      >
        <SettingsIcon rightBarState={rightBarState} theme={theme} />
      </button>
      <button
        onClick={() => {
          buttonHandler("recently_played");
        }}
      >
        <RecentlyPlayedIcon rightBarState={rightBarState} theme={theme} />
      </button>
    </StyledTopButtons>
  );
};
const StyledTopButtons = styled(StyledTop)`
  margin: 3.9rem 4rem;
  width: calc(100% - 8rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  button {
    transform: translateX(-2.6rem);
    height: 2.2rem;
    cursor: pointer;
    svg {
      height: 100%;
      pointer-events: none;
    }
  }
`;

export default RightBarButtons;

---- StyledTop 组件，我继承自 ----

export const StyledTop = styled.div`
  height: 2.8rem;
  width: 100%;

  h1 {
    margin: 4rem;
    font-size: 2.8rem;
    font-weight: 600;
    color: ${(props) => (props.theme === "light" ? "black" : "white")};
    cursor: pointer;
  }

  span {
    color: #3ca8c9;
  }
`;

如果有人可以帮助我弄清楚为什么它的行为不符合预期，我将不胜感激。 谢谢。

Answer 1

我已经解决了这个问题。在查看@RichardZhan 沙箱代码后，我决定删除图标，只在按钮内添加纯文本。这立即解决了问题，这意味着问题来自图标。我对图标应用了静态宽度，这很有效。宽度的值与高度相同，这样图标保持方形。

下面是我的组件代码，在底部的样式组件部分，您可以看到按钮和按钮内的 svg 的宽度和高度的定义。

// Libraries
import styled from "styled-components";
import { useSelector, useDispatch } from "react-redux";

// Components and icons
import { StyledTop } from "../Components/styles";
import {
  QuitIcon,
  SettingsIcon,
  RecentlyPlayedIcon,
} from "../Components/icons";

const RightBarButtons = () => {
  // Grab needed state and set vars
  const theme = useSelector((state) => state.theme);
  const rightBarState = useSelector((state) => state.rightBarSelection);
  const dispatch = useDispatch();

  // Handlers
  const buttonHandler = (buttonName) => {
    if (buttonName !== rightBarState) {
      dispatch({
        type: `SET_RIGHT_BAR_${buttonName.toUpperCase()}`,
      });
    }
  };
  return (
    <StyledRightBarTop>
      <button>
        <QuitIcon theme={theme} />
      </button>
      <ButtonBreak />
      <button
        onClick={() => {
          buttonHandler("settings");
        }}
      >
        <SettingsIcon rightBarState={rightBarState} theme={theme} />
      </button>
      <ButtonBreak />
      <button
        onClick={() => {
          buttonHandler("recently_played");
        }}
      >
        <RecentlyPlayedIcon rightBarState={rightBarState} theme={theme} />
      </button>
    </StyledRightBarTop>
  );
};

const StyledRightBarTop = styled(StyledTop)`
  display: flex;
  justify-content: space-between;
  button {
    height: 2.4rem;
    svg {
      height: 100%;
      // static width, matching the height, keeping correct dimensions for the SVG and button
      width: 2.4rem;
    }
  }
`;

const ButtonBreak = styled.div`
  height: 100%;
  width: 0.2rem;
  background: blue;
`;

export default RightBarButtons;