React Styled Components: Justify content does not work but align items & flex-direction do?

Question

I added justify-content: space-evenly to a div in my React app, but I see no change. I have applied, display: flex, align-items: flex-end, and they all work as expected. I also tried flex-direction to check that was working, and it did. I don't understand why justify-content isn't working? I Have tried other values of justify-content such as space-around, space-between and center, but I had the same result, justify-content doesn't seem to work at all. Below is my code for the component and the parent styles the component inherits...

---- Component ----

// 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 component, that I am inheriting from ----

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;
  }
`;

If someone could help me figure out why this isn't behaving as expected I'd really appreciate it. Thanks.

Answer 1

I have solved the problem. After looking at @RichardZhan sandbox code, I decided to remove the icons and just have plain text inside of the buttons. This solved the problem instantly, meaning the problem arose from the icons. I applied a static width to the icons and this worked. The value of the width is the same as the height, that way the icons remain square.

Below is my code for the component, in the styled components section at the bottom, you can see the definition of the width and height for the buttons and svgs inside of the buttons.

// 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;