css - React Styled Components:对齐内容不起作用,但对齐项目和 flex-direction 可以吗?
问题描述
我在我的 React 应用程序中添加justify-content: space-evenly
了一个 div,但我没有看到任何变化。我已经申请了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;
}
`;
如果有人可以帮助我弄清楚为什么这不符合预期,我将不胜感激。谢谢。
解决方案
我已经解决了这个问题。在查看@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;
推荐阅读
- reactjs - 当用户点击外部时隐藏反应引导吐司
- flutter - 如何使用 flutter_inappwebview 插件从图库 android 设备上传图像?
- javascript - 如何获取这个内联函数并将其转换为方法,同时保留对此的访问权限?
- java - 从云端启动 jmeter 分布式测试
- c++ - 在我的 strpbrk 函数中返回 nullptr 时出现分段错误
- python - 为什么是错的
- javascript - 使用 javascript/react 按内部键过滤
- python - 如何进行嵌套列表理解?
- terraform - Terraform 变量定义
- python - 如何使用 pandas 聚合大型 DataFrame 中的多个列?