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

Posted 2023-03-15

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

【英文标题】：React Styled Components: Justify content does not work but align items & flex-direction do?

【发布时间】：2021-07-24 14:59:39

【问题描述】：

我在我的 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;
  
`;

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

【问题讨论】：

好吧，我很不明白为什么会这样。我试图从头开始复制你的组件，除了逻辑，它似乎工作正常......codesandbox.io/s/flexbox-test-ilfr7

@RichardZhan 感谢您的浏览，包括沙盒链接。我明天早上再试一次，然后报告！

你好@user15459167 这能回答你的问题吗？ ***.com/questions/24052569/…

嘿，@PriyankKachhela，这确实帮助我指明了正确的方向，谢谢！

@RichardZhan 我只是把答案放在下面。再次感谢您的帮助。

【参考方案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;