Блог

Когда я добавляю оболочку к этому jsx, она нарушает существующий CSS, и я не могу определить почему. Сначала CSS страницы является правильным, но эта оболочка приводит к сокращению элементов меню. Чего мне здесь не хватает?

Перед:

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

После:

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

Браузеры обычно добавляют свой собственный стиль к anchor тегу, и тег также наследует некоторый стиль от тела и еще много чего. Что вам нужно сделать, так это применить к якорю свой собственный CSS, чтобы убедиться, что он всегда расширяется как оболочка.

Может быть, что-то вроде этого должно помочь.

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

Если в вашем пункте меню также есть некоторые отступы, я предлагаю также переместить это отступ в привязку.

В любом случае, вы всегда можете поиграть с CSS, применяемым к вашему тегу привязки, если вы проверяете элемент (щелкните правой кнопкой мыши -> Проверить). Дайте мне знать, если у вас возникнут дополнительные вопросы по этому поводу.