React-Bootstrap CSS 问题答案

【问题标题】：React-Bootstrap CSS issueReact-Bootstrap CSS 问题
【发布时间】：2021-10-02 08:39:25
【问题描述】：

当我导入 Bootstrap CSS 时，它会向导航栏添加额外的 CSS。如下图所示。我在此代码中使用引导卡，但不适用于导航栏。当我删除 Bootstrap CSS 时它工作正常。

您可以查看代码here

请帮我解决这个问题。

【问题讨论】：

它添加了额外的 css，因为引导程序有自己的 css 用于您正在使用的类名。所以你可以使用不同的类名。
我在导航栏中添加了不同的类名，但它不起作用。
添加 Bootstrap CSS 后您遇到的问题是什么？
您可以查看图片。当我导入引导程序时，它会在导航项中添加下划线，甚至更改字体大小和样式。

标签： css reactjs react-bootstrap

【解决方案1】：

如果你的问题是下划线，你可以省略使用

style={{ textDecoration: 'none' }}

这是您修改后的navbar.jsx 文件

// eslint-disable-next-line
import React from 'react';
import { NavLink } from 'react-router-dom';

function Navbar(){
    return(
        <>
            <header className="l-header"> 
                <div className="navi bd-grid">
                    <div>
                        <NavLink to="#" className="navi__logo">Portfolio</NavLink>
                    </div>

                    <div className="navi__menu" id="navi-menu">
                        <ul className="navi__list">
                            <li className="navi__item">
                                <NavLink to="#home" className="navi__link menu" style={{ textDecoration: 'none' }}>Home</NavLink>
                            </li>
                            <li className="navi__item">
                                <NavLink to="#about" className="navi__link" style={{ textDecoration: 'none' }}>About</NavLink>
                            </li>
                            <li className="navi__item">
                                <NavLink to="#skills" className="navi__link" style={{ textDecoration: 'none' }}>Skills</NavLink>
                            </li>
                            <li className="navi__item">
                                <NavLink to="#work" className="navi__link" style={{ textDecoration: 'none' }}>Work</NavLink>
                            </li>
                            <li className="navi__item">
                                <NavLink to="#contact" className="navi__link" style={{ textDecoration: 'none' }}>Contact</NavLink>
                            </li>
                        </ul>
                    </div>

                    <div className="navi__toggle" id="navi-toggle">
                        <i className='bx bx-menu'></i>
                    </div>
                </div>
            </header>
        </>
    );
};

export default Navbar;

输出将是这样的

【讨论】：

是的，它删除了下划线，但导航停止工作。

【解决方案2】：

尝试在您的 index.js 文件中导入引导程序，它应该可以解决问题。

【讨论】：