为什么我的包装器会破坏它正在包装的内容的 CSS？

Question

When I add a wrapper to this jsx, it breaks the existing CSS and I can't determine why. The page CSS is proper at first, but this wrapper causes the menu-item s to shrink. What am I missing here?

Before:

import React from "react";
import { withRouter } from "react-router-dom";
import "./menu-item.styles.scss";

const MenuItem = ({ title, imageUrl, size, history, match }) => (
    <div className={`${size} menu-item`}>
        <div
            className="background-image"
            style={{
                backgroundImage: `url(${imageUrl})`,
            }}
        />
        <div className="content">
            <h1 className="title">{title.toUpperCase()} </h1>
            <span className="subtitle">SHOP NOW</span>
        </div>
    </div>
);

export default withRouter(MenuItem);

After:

import React from "react";
import { withRouter } from "react-router-dom";
import "./menu-item.styles.scss";

const MenuItem = ({ title, imageUrl, size, history, match }) => (
    <a href="https://www.google.com">
        <div className={`${size} menu-item`}>
            <div
                className="background-image"
                style={{
                    backgroundImage: `url(${imageUrl})`,
                }}
            />
            <div className="content">
                <h1 className="title">{title.toUpperCase()} </h1>
                <span className="subtitle">SHOP NOW</span>
            </div>
        </div>
    </a>
);

export default withRouter(MenuItem);

Answer 1

The browsers generally add their own style to the anchor tag, and the tag also inherits some style from the body and whatnot. What you need to do is make apply some CSS of your own to the anchor to make sure it's always extended like a wrapper.

Maybe something like this should help.

#mainMenu a {
 display: inline-block;
 width: 100%; //depending if your menu direction is in rows or columns
}

If your menu item also has some padding, I suggest moving that padding to the anchor as well.

Anyhow, you can always toy around with the CSS applied to your anchor tag if you inspect the element (Right Click -> Inspect). Let me know if you have more questions about this.