React Styled Components中display:flex导致Logo不显示问题求助

核心问题 #

你的代码存在CSS语法错误，这是导致flex布局下Logo无法显示的根本原因：

• Nav组件的& > a样式块中，width: 135px末尾缺少分号，浏览器无法正确解析整个a标签的样式规则，flex布局下a标签没有设置有效宽高，图片因此无法正常渲染。
• 移除flex后，Nav变回默认块级元素，但a标签的样式依然因语法错误不生效，图片只能按原始尺寸显示，所以会出现过大的情况。

修复步骤 #

1. 补全width: 135px后的分号，让a标签的宽高样式正常生效；
2. 给img标签添加自适应容器的样式，确保图片按比例适配a标签尺寸，避免变形或溢出。

修复后的代码 #

import React from 'react';
import styled from 'styled-components';

const Login = (props) =>{
    return(
        <Container>
            <Nav>
                <a href='/'>
                    <img src='/images/login-logo.svg' alt='Logo' />
                </a>
                <div>
                    <Join>Join Now</Join>
                </div>
            </Nav>
        </Container>
    );
};

const Container = styled.div`
padding: 0px;
`;

const Nav = styled.nav`
max-width: 1128px;
margin: auto;
padding: 12px 0 16px;
display: flex;
align-items: center;
position: relative;
justify-content: space-between;
flex-wrap: nowrap;

& > a{
    width: 135px; /* 补充分号，修复语法错误 */
    height: 34px;
    display: block; /* 确保a标签作为块级容器生效 */
    @media(max-width: 768px){
        padding: 0 5px;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 保持图片比例，自适应容器尺寸 */
    }
}

`;

const Join = styled.a`
font-size: 16px;
padding: 10px 12px;
text-decoration: none;
border-radius: 4px;
color: rgba(0, 0, 0, 0.6);
margin-right: 12px;
&:hover{
    background-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
    text-decoration: none;
}
`;

export default Login;

内容的提问来源于stack exchange，提问作者Mathan